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Foreword 


If you’ve ever asked a teenager for help with your 
computer, you'll probably have felt the crushing 
weight of self-doubt as you realize you understood 
less than half of what they just said. That same 
“helpful teen” would most likely scoff at the idea of a 
book — made out of honest-to-goodness old-fashioned 
paper — on the subject of learning to code. “Just 
Google it, there are loads of tutorials on Youtube!” 
they might say. 

But not everyone is high-bandwidth, multi-screen 
ready. Plus, when you are carefully stepping through 
the creation of your first lines of code, a physical page 
with your fingertip planted firmly on the next step can 
act as a valuable lifeline to the tangible world. 

If you're reading this as a teenager yourself, 
congratulations on discovering life beyond YouTube! 
You're about to find out that the creators of this guide 
are exactly the kind of industry-defining professionals 
whose content channels, blogs, and social media posts 
you'd end up on if you did decide to Google “learning 
to code”. 

As a life-long gamer and computing enthusiast 
I've been reporting on technology for almost a quarter 
of a century. In that time, I’ve witnessed seismic 
changes in the way we interact with the world. A.1., 
big data, automation, e-commerce — all now intrinsic 
parts of our daily routines even if we aren’t always 
aware of them. 

Technology is no longer a niche topic. In fact, 
today, every industry could be considered a tech 
industry, which leads to a simple choice: get with 
it or get left behind. 


Starting at the absolute beginning, this guide will 
introduce the jargon and tools you'll need to get 
programming in the most popular and versatile 
software languages. The pages are also peppered 
with interesting facts about coding and careers, 
together with step-by-step projects to get you going. 
Even if you decide not to become the next Mark 
Zuckerberg, the skills you'll learn will be a great 
asset when talking to technology professionals 
and will also help develop your own logic and 
problem-solving abilities. 

It was an ancient Greek philosopher who first noted 
the irony “the only constant in life is change”, and 
this has never been more true than in the world of 
computing. Maybe you're looking for a different career 
or want to learn a new skill to support a hobby or 
passion project? Or perhaps you just want to be able 
to talk to your tech-obsessed teenager in a language 
that will impress them! 

For those curious about coding, this guide is full of 
straightforward information, in easily digestible bites, 
written by some of the leading educators and experts 
in their field. There is jargon, but it’s jargon you'll 
understand as you get to it. Is learning about coding 
essential? No. Will it help you understand and feel 
more comfortable in the world we now live? I think so. 
Could it lead to a new and amazing career direction? 
Definitely, if that’s what you want. 

There is still a desperate shortage of technology 
professionals in the workforce. Opportunities exist, 
but they are not going to come looking for you unless 
you speak at least a bit of their language. 


Kate Russell 
Technology reporter, 
author, and gamer 


About this book 


How this book works 


grouped under Web Technologies. The book defines 


Divided into three chapters, this book teaches the the basic concepts of each programming language and 
fundamentals of five programming languages: Scratch, builds on them with the help of detailed projects that 
Python, HTML, CSS, and JavaScript; the last three are you can try on your own. 


Concepts 

Each chapter contains the basic 
programming concepts of the language. 
These are explained with the help of 
practical code examples that you can try 
out to understand the concept better. 


Illustrations help 
you understand 
and learn concepts 


Projects 

The projects in this book teach you how to 
create games, planners, apps, and websites. 
Each project starts with a brief overview of 
what you will learn in the project, how to 
plan the project, and what you will need to 
create it. Simple step-by-step instructions 
guide you through the project and explain 
every aspect of the code, with the help of 
detailed annotations. 









Indicates the estimated 
time it will take to create 
a project 


Lines of code: 58 Indicates the estimated lines 
oo of code in a project. This 
Difficulty level may vary depending on the 
@ @ code editor being used 








YOU WILL LEARN 
This box highlights the concepts Indicates the difficulty level of a 
being used in a project project, with one being the easiest 
Projects are broken down into 
smaller sections with clear steps 
to make learning easier 
- available = 2500.00 


Hacks and tweaks 

The “Hacks and tweaks” section at the end 
of each project provides tips on how to 
tweak existing bits of code, or add new 
functionalities to it. 





— > budgets = {} 


STEP-BY-STEP 
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Coding elements in the book Icons a 
TeCis:. celemenode acon wnnente. and The “Save” icon will remind you to save the program at a 

g ; particular point in the project. The “HTML’, “CSS”, and “JS” 
flowcharts that explain the program structure icons indicate which web file you need to write the code in. 


help you work your way through the projects. 


? oO 
Python code windows 
Python uses two different windows - the shell window anne ene = 
and the editor window - for writing code. To differentiate 


between the two, this book uses different colours. This will 
help you know which window you should type the code in. 





Each block of the grid represents 
a single space in the code 





>>> input = 2 def reset _game(): 
>>> score = input * 3 global score, charms 
>>> print (score) score = 0 
6 charms = 0 
SHELL WINDOW EDITOR WINDOW 
These chevrons appear only in Every indent (spaces at the start of a line) 
the shell window. Type in the equals four empty grid blocks. All subsequent 
code at the >>> prompt indents will be in multiples of four 


Web languages code window 








The code for all the Web languages ..-<ulL id="topMenu" class="navbar-nav mr-auto"> 
is written in green-coloured windows 
in this book. A special visual element, <li class="nav-item"> 
a turnover arrow, is used to indicate 
code being split over two lines. This <a class="nav-Link" href= 
element is not part of the actual code 
and has only been introduced in the "index. htmL">Home</a> 
book to help explain the flow of code 
in a block. </li> 
In this book, ellipses are used at the Grey code indicates an CODE WINDOW FOR The placement of the arrow 
start of a line of code to indicate an existing line of code in WEB LANGUAGES indicates if a space needs to 
extended indent, usually more than the program. It is used be added before it. In instances 
eight grid blocks to identify the line below where there will be no space, 
or above which the new no empty grid blocks are left 
code must be added between the arrow and the code 





DK website for code 

The resource pack for the projects in this book (except the 
“Hacks and tweaks” sections and the projects created in < www.dk.com/coding-course 
Scratch) have been hosted on www.dk.com/coding-course. 
This includes code in its original format (.py, .html, .css, .js) 
and images for all the games and websites. 


-@@@ pK DK 





Go to this url to download the 
Coding Course Resource Pack 





What Is 
programming? 


Computers and electronic devices need 
software (or programs) to tell them what 
to do. Programming, or coding, is the art 
of writing these instructions. Though some 
people are professional programmers, 
coding can also be a hobby. 








Computer programs are everywhere 
Programming is not just about conventional computer 
systems anymore. The world has become increasingly 
digital, and almost everything runs on software. 
Programs are now incorporated into devices such as 
mobile phones and tablets, labour-saving equipment 
around the home, and even in transportation systems. 







Desktop computer 











} Car 
Software can be used to 
monitor a car's systems and ~ 
performance, including its 
speed, temperature, and 
fuel. The global positioning 
system (GPS) used 
for navigation also 
requires programs. 








Computers are widely used in 

offices and homes for managing 
administrative and creative activities, 
such as music, design, writing, 
banking, and many more. 


BECOMING A CODER 


After learning the basics of programming, 

these tips can be used to develop coding 

skills further. 

- Practice: Write and experiment with code 

- Read code: A lot can be learned by 
studying other people's programs 


- Learn multiple languages: Learning 
the different ideas and concepts of other 
languages can help programmers choose 
the most suitable language for each project 
- Publish projects: Putting work online and 
getting feedback on it from other coders 
helps you to write better code 
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What is a computer program? Thinking like a computer 
A program is a set of instructions that a computer To write a program it is necessary to 
follows to perform a task. Programs can be extremely understand how a computer processes 
complex, and there can be several different layers of instructions. This means that tasks need to | | 
programs working together. Microsoft Windows, for be broken down into smaller chunks so that 
example, is made up of millions of lines of instructions. the computer can understand the instructions. 
For example, a robot cannot simply be asked to 





Applications software, “make some toast”. It is necessary to program 


such as word processors, : : ' : 
: ome precise and detailed instructions for each step. 
run on top of the 


operating system 


























rae ON . 
le Instead of repeating 
Operating systems, such 1. Open breadbin the same instruction 
as Microsoft Windows 2. Remove loaf twice, it will be 
and macOS manage the 3. Open bag shorter and clearer 
: to say “Do this twice: 
hardware and software Aeieemavelica eae 
ie | ae remove slice, insert in 
a _ . Insert in toaster | ns 
= ?— = Firmware is software that : i SOEIS Se UME) PUSS TE 
= ten} ‘ ; 6. Remove slice 
zz - is coded into the hardware, ; 
To including the Basic Input/ 7.Insertintoaster | 
— ———- 





eee — "Output System (BIOS) 8. Push down plunger 
9. Wait until toast 








Hardware includes the physical Pope ur 
elements of a computer, such — 
as the monitor i i J 


















































Games console 

Consoles such as the Sony 
PlayStation, Microsoft Xbox, 
and Nintendo Switch are 
computers designed to offer 
a great gaming experience. 





Factory equipment 

Factories can be highly automated. Assembly 
line robots, planning and control systems, 
and quality-control cameras all require 
programs to operate. 



















Managers and office workers 
Many businesses create and use specialized software. 
Software engineers develop complex software systems, 
but managers and office workers often write short 
programs to solve problems or automate tasks that 
might take hours or days by hand. For example, 
they might write code to query databases, 
format information, analyse data, control 
equipment, customize websites, or add features 
to word processors and spreadsheets. Some 
programming languages are specifically 
designed for these purposes (see pp.344—47). 















Artists and hobbyists 
Coding can support many forms of 
creativity. Artists can create software to 
make music or visual art that changes as 
people interact with it. Hobbyists might 
create software for games, interactive 
stories, to direct simple robots, control 
lighting, or do tasks around the home. 


Coding in 
the real world 


Coding is used in nearly every aspect of modern life 
and work. Basic knowledge of coding helps people to 
use software more effectively, create simple programs, 
and communicate with other software developers. 
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Software engineers and web developers 
Software developers work for many different businesses 
and organizations. Businesses require software to 
track inventory and place orders with suppliers, 

to schedule employees and track work hours, 

and to send mailings to customers. Insurance 
companies use software to set pricing based 
on the number and cost of events, and to 
review and approve policies. Websites 
often combine existing programs with 
custom coding for special features. 
software engineers play key roles 

in developing systems that suit 

a client’s needs. 





Scientists and researchers 
Code can also be used to create 
experiments, analyse data, and 
create medical reports. For example, 

brain scientists might use software 

to display shapes or words to a 
patient, to record brain activity, and 

to analyse the data to learn what parts 

of the brain are most active. 












25,000,000 


WORKERS ACROSS 
THE WORLD ARE 
SOFTWARE DEVELOPERS 


Working as a 
software developer 


Writing a simple program might seem straightforward, but it can be 
surprisingly difficult. Developing large, reliable software systems is 

even more complex, and requires teams of software developers with 
a variety of specialized skills and roles. 





Analyse 

In this phase, developers decide what the 
software must do. They might study existing 
systems, design new processes, or interview 
people to understand how they will use the 
system. This also defines other constraints 

or requirements. For example, how much 
data must the system handle, how quickly 
must it respond, and what should it do when 
problems occur? The resulting documents could 
range from a few pages to hundreds or more. 


Test 

Developers check whether the 
software works correctly, and fix 
any problems they find during 















the testing phase. This is often the 
longest and least predictable phase, 
and a common reason for delays 
and extra costs. There are many 
types of tests - unit tests check if 
individual functions are correct, 
functional tests check individual 
components, integration tests 
check if components work together, 
and system tests check the 

entire system. 
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Overview 


Software development involves four phases: analyse, design and 
plan, build, and test. These phases, however, can be structured in 
a variety of ways. A waterfall model steps through each phase once, | 
which seems simple, but often leads to problems. An iterative model 

cycles through the phases several times, building part of the system 

in each cycle. An agile model cycles through each phase many times, 

adding different features in each cycle. 


Design and plan pieces, and specifying the files and even the individual 
In this phase, developers decide how the software functions to be created. Developers also need to 

will work and how it will be created. This can include estimate the time, effort, materials, and cost to create 
deciding on which language to use, sketching user the system, and a schedule for who will do which tasks 
interfaces, designing databases, subdividing it into at what time. 








Build 

In the build phase developers 
create the software, including 
user interfaces, databases, code, 
and documentation for users and 
programmers. This means that 
coding is just one part of one 
phase of software development, 
and in some ways the easiest and 
most predictable. As each piece is 
built, developers might inspect or 
review the code to see how well 
itis written, and then integrate it 
into the larger system. 









languages 


Programming 


A programming language is a set of words and symbols that 
allows people to write instructions for a computer. There is 
sometimes a compromise between how easy the language 


is to use and how powerful it is. 


High- and low-level languages 

High-level programming languages are designed to be 
easy to use without needing a detailed understanding 
of the computer hardware. They often use words that 
are similar to human language, and manage some 
aspects of the computer automatically. Often, the same 
















HIGH-LEVEL LANGUAGES 


- Relatively fast to write 

- Relatively easy to understand 

* Usually fast enough in execution 

* Programs can be used on different 
hardware 

* No need to understand hardware 


LOW-LEVEL LANGUAGES 


* Direct control of hardware features 
* Can increase speed of highly 
performance-sensitive code 
* Requires an understanding of 
the hardware 
* Program only works on the 
same or similar processor 


program can run on different hardware if it is written 
in a high-level language. By contrast, low-level 
languages give programmers granular control over 
the computer, but also require a deeper understanding 
of how it works. Programs written in a low-level 
language might not work on other hardware. 


Instruction to 
display some text 


print ("Hello!") 


Python 

A popular high-level language, 
Python is easy to read and write. 
This instruction puts the message 
“Hello!” on the screen. 


This is hexadecimal, 
a common counting 
system in computing 


MOV AX, 66H 


Assembly language 
Assembly language more 
closely reflects the processor's 
machine code. This example 
takes a number and places it 
into the part of the processor 
called the accumulator. 


Machine code 

Low-level code that represents how the computer 
hardware and processor understand instructions 

is called machine code. It is a collection of binary 
digits — 1s and Os — that the processor reads and 
interprets. Machine code instructions are comprised 
of an opcode and one or more operands. The opcode 
tells the computer what to do and the operand tells 
the computer what data to use. 


Microprocessor 

The microprocessor is the “brain” 
of a computer and controls most 
of the machine's operations. It 
carries out commands and runs 
the machine code instructions. 
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How the computer understands 
a programming language 
Ultimately, all programs end up as machine 
code. Most programs are written in more 
human-friendly languages and need to be 
translated into raw bits so that they can 
be executed by a processor. An interpreter 
translates and executes the instructions as 
the program is running, while compilers 
translate the program in one go before it runs. 


> (EI 





HUMAN- CONVERT TO RUN 
FRIENDLY COMPUTER INSTRUCTIONS 
CODE INSTRUCTIONS 





Using an integrated development 
environment (IDE) 

An IDE is a set of tools that helps programmers. It 
has a code editor for writing programs, and may 
include productivity features, such as autocomplete 
for instructions and colour coding to help readability. 
some IDEs also include a debugger to help find 
errors, and a compiler or interpreter to test and 

run the programs. 


Code area to write 
and edit programs 


File explorer 
for project files 





Debugger to find 
errors in the program 





APPLICATIONS eee 


Once you have learned how to program, these 
skills can be used for a wide range of creatively 
fulfilling and useful projects. 

- Home automation: To control things such 
as lights or curtains remotely 

- Games: A great way to experiment with 
coding, games are easy to share and to 
get feedback on (see pp.80-91, 178-203) 

* Robots: Using Arduino or Raspberry Pi boards 
along with kits or electronic components, 
people can program their own robots 

- Websites and web apps: Programs that can run 
anywhere in a web browser can be created using 
HTML, CSS, and JavaScript (see pp.210-343) 


An example IDE layout 

IDEs sometimes enable users to configure 
their set-up. Here is one configuration that 
allows the programmer to browse the 
project files on the left, code and edit 

on the right, and debug at the bottom. 





|=] TYPES OF PROGRAMMING LANGUAGE 


Types of programming language 

Many different philosophies or paradigms have been used to design 
programming languages over the years. Since they are not mutually 
exclusive, programming languages often embody several core ideas. They 
can also be used in different ways depending on the programmer’s preferred 
approach. Python, for example, can be used for both object-oriented and 
procedural programming. JavaScript can be used for event-driven and 
object-oriented programming. The best approach or the best programming 
language to use often depends on the programmer’s preference. Below are 
some of the ways that programming languages can be defined and classified. 


IMPERATIVE PROGRAMMING 

These languages require a list of instructions for the 
computer to carry out. The programmer has to first 
work out how the task can be completed, and then 
provide step-by-step instructions to the computer. 
Imperative languages are common and include 
Python (see pp.94-95), C, C++, and Java. 


user = input("What's your name? ") 


print("HeLlo", user) 





INPUT IN PYTHON Python program 


to greet a user 
by name 


What's your name? Sean 


Hello Sean 


OUTPUT IN PYTHON 


EVENT-DRIVEN PROGRAMMING 
The event-driven programming concept is 
one where the program listens for certain 
things to happen, and then starts the 
appropriate program sequence when they 
do. For example, a program might react 

to user actions, sensor input, or messages 
from other computer systems. JavaScript 
(see pp.264-65) and Scratch (see pp.28-29), 
among others, can be used to write 
event-driven programs. 


Runs the showMessage() 
JavaScript instructions when 
the button is clicked 


DECLARATIVE PROGRAMMING 

In declarative programming, programmers tell the computer 
what result they want, without needing to say how it will be 
achieved. In the Wolfram Language, for example, a word cloud 
based on the words in Wikipedia's Music page can be created 
using a single line. Other declarative languages include SQL, 
which is used for databases. 


WordCLoud[WikipediaData["music"] ] 


INPUT IN WOLFRAM 


classical work western musicians 
styles pop bass blues history 


enres pitch il tyl 
genres meen Music art 


ead melody traditional Pet!od 


culture 


era : 
instruments 


note theory 


OUTPUT IN WOLFRAM 


Creates a 


web page button 


<input type="button" value="Click me!" 


onCLick="showMessage () ; "> 


This icon has been used in 
the book to indicate code 
being split into two lines 
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CHOOSING A LANGUAGE 


Sometimes, programmers’ choice PYTHON SCRATCH 
of language may be dictated by the 
hardware they are using, the team 


A flexible language, it emphasizes A great first programming language, 


ease of understanding in the code. Scratch is perfect for simple games. 
they are programming with, or the 


kind of application they want to 
create. Often, they will have a choice. 


Here are some popular languages Widely used in financial services, The language used by web 
that can be considered. small devices, and Android phones. pages for interactivity. 


JAVA JAVASCRIPT 





PROCEDURAL PROGRAMMING] OBJECT-ORIENTED PROGRAMMING 

This type of programming is based on functions, In object-oriented programming, the idea is that data and the 
which contain reusable chunks of program. instructions related to it are stored together in “objects”. Objects can 
Functions can start other functions at any time, interact with each other to achieve the program's objectives. The 
and can even start themselves again. They make aim is to make code more modular, so it is easier to manage, and 
programs easier to develop, test, and manage. is more reusable. Many popular programming languages, such as 
Many popular programming languages, such C++, JavaScript, and Python support object-oriented programming. 


as Java and Python (see pp.94-95) support 


procedural programming. 





MAIN PROGRAM 


Data for this object 
. T : Instructions for this object 
‘ . Interfaces for communicating 
FUNCTION 1 P 


‘ head! 


i! FUNCTION 3 


P VISUAL PROGRAMMING LANGUAGES 
These languages make it easier to develop software using drag-and-drop 
FUNCTION 2 interfaces, so a programmer can create software more quickly and with 


fewer errors. Visual Basic, for example, includes tools to design user 
interfaces visually. Scratch (see pp.28-29) is another highly visual language, 
often used to learn programming. 


A Scratch program to react 
when a button Is clicked 


. @ when this sprite clicked 


Ly say (Button was clicked! ) for (2) seconds 

















What 1s Scratch? 


Scratch is a visual programming language that does not require 
users to type code. Instead, they build programs using coloured 
blocks that represent instructions. Scratch focuses on the creative 
aspect of coding, and allows users to create interactive games, 
stories, and other visual applications. 





Features 

Scratch has a number of features that 
make it an ideal programming language 
for beginners. The use of ready-made 
blocks of code sets it apart from most 
other programming languages. 









Learning to program with Scratch 
Scratch was created by the Lifelong Kindergarten 
group at the Massachusetts Institute of Technology 
(MIT) in the US. It was first launched in 2007. 
Scratch was designed to be fun and easy to use 
for beginners, and to help them understand basic 
concepts and avoid errors. It is therefore widely 
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used in education. Scratch has a highly 
visual interface with coloured blocks of 
code that join together to form scripts, 
which can include images and sounds 

to create action on screen. Scratch provides 
a powerful platform (see pp.30—31) for 
exploring programming. 








Hardware support 

The latest version of Scratch works on computers 
with Windows, macOS, and Linux. It can even 
be used on tablets. Scratch projects can use 
extensions to interact with hardware devices. 


Raspberry Pi 
Scratch can use a Raspberry Pi to connect 
to other sensors or motors. 


micro:bit 

Scratch can be used with a BBC micro:bit, 
which has a built-in LED display, buttons, 
and tilt sensors. 


Lego® 

Scratch can connect to Lego® WeDo and 
Lego® Mindstorms™ to work with motors, 
sensors, and robots. 


Webcam 

Scratch can access a webcam to layer images on 
a live video feed to create simple augmented 
reality applications. 


GETTING SCRATCH 


The Scratch developer environment is required 
for using Scratch. It can be accessed both online 
and offline. 


Offline 

Scratch can be downloaded and used 
without an Internet connection at 
https://cratch.mit.edu/download. 


In your browser 

Visit the Scratch website at 
https://scratch.mit.edu/ and click 
Join Scratch to create an account. 





Scratch interface 


The screen layout, or interface, in Scratch can be used to build 

programs, edit them, and view the output 1n the same screen. The 
interface is divided into several sections, each serving a particular 
purpose. This book uses Scratch 3.0 - the latest version of Scratch. 


. Create new projects, Use the Sounds tab to 
Understanding the screen layout Change upload or save work Edit existing add music and sound 
The Scratch interface is divided into the language to the computer projects effects to sprites 


following sections: 
- Blocks Palette: This contains the instructions, 


or code blocks, required to build a program SSS SS 















- Code Area: The instruction blocks are & Code <f/ Costumes @) Sounds 
assembled here to create a script 
- Stage: Allows the user to interact with Use the Costumes 


the program i tab to change 

- Sprite List: Displays and manages all the ie ella of 
images, or sprites, used in a program 

- Stage Info: Manages the background images 


. My Blocks 
There have been three versions of Scratch so far, y , 
Select instruction blocks and 


each with a different screen layout. New features drag them into the Code Area 
and instruction blocks were added at each update to build a program 
of the interface. These features may not work on 
earlier versions. Contains the instruction 
* Scratch 1.4: The interface was similar to Scratch blocks that can be used 
3.0, but the Code Area was called Scripts Area. 
* Scratch 2.0: The Stage was on the left of the 
screen. Introduced sprite cloning and reorganized 
some blocks into the Events category. 
* Scratch 3.0: Introduced Blocks Palette 
extensions, and moved the Pen blocks into them. Use the “Add Extension” Store useful code, sprites, costumes, 


button to add newcategories = and sounds in the Backpack so that 
of blocks to the Blocks Palette = they can be used in other projects 








Backpack 
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The Stage shows Click or tapa 
the sprites moving sprite on the 
Share projects and interacting with Stage orinthe Edit profile 
Name of with the Scratch Access the community each other when Sprite List to and access 
the project community page of a project a project is run select it saved projects 


= 


Changes the size 


Stop the of the Stage and 
Run the program program Code Area 











Blocks snap together - use the 
mouse to move them around 





Sprite | Sprite1 ex 90) By! -10- 


Show @ @ Size 100. | Direction | 90 


This panel gives 
information about the 
selected sprite 


Cactus 








Drag instruction blocks into the A blue box This panel shows the sprites used | Add new sprites Change the 
Code Area and join them together highlights the in a program. Select one to see to the project backdrop 
to build a script for a sprite selected sprite its code in the Code Area 


Sprites 


Sprites are the basic components of Scratch. Similar to characters 
in a video game, they can move around the Stage, change their 
appearance, and interact with other sprites. Each sprite uses one 
or more images and is controlled by scripts. 


How do sprites work? 

Most sprites have multiple images, called costumes, 

which can be used to animate them in a program. The Cat 

sprite, for example, has two costumes that show its legs 

in different positions. Switching between the costumes 

makes it look like the cat is walking on the Stage. Scratch Default sprite 


Every project starts with the Cat 


comes with a preloaded library of sprites that can be sprite. Delete it by clicking the “x’ 


used and modified in a program. on its thumbnail in the Sprite List. 








Creating a sprite 

Scratch allows its users to add or create their own images. The Choose 
a Sprite button on the bottom right of the Sprite List reveals options to 
add, create, or upload sprites in a project. 


& 





+ 


* 
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Painting a sprite’s costume 

The Paint Editor in Scratch can be used to make new sprites or create 
additional costumes. By default, the editor uses the vector mode, which 
stores images as shapes and lines, making them easier to edit. The 
user can switch to the bitmap mode, which stores the colour of every 
bit in the image. The Paint Editor shown below is in the vector mode. 


Select this tab to Name the costume 
open the editor Undo / Redo 


Control which 


y, C Combine or elements are in 
ostumes Sounds A split sh front of oth 
> plit shapes ront of others 
| | 


| | 
i d ie a =| 
Costume Costumel gr ww | | y . 
Group Ungroup : Forward Backward: Front Back 


za Vv 
Outline 2 v i] >:< A 


Copy Paste | Delete | Flip horizontal Flip vertical 














Fill 








Choose which 








costume to edit Ee select an Line thickness Flip selected 
outline colour elements 
fill colour 
horizontally 
Select tool or vertically 





Eraser tool deletes 
a selected element 


costume 2 
IEEE BLS 
Text tool adds 
text elements 
to an image 


Me 


a shape in 
freehand 


Brush tool draws 7 
LJ 


Fill tool adds 
colourtoa 
shape 


Use the Line, 
Circle, and 
Rectangle tools 
to draw shapes 





= a] =| Q) 


Adda Switch between vector Use the canvas to 
costume and bitmap modes draw an image 















Zoom controls 








Coloured blocks 
and scripts 


scratch instructions come in colour-coded blocks that can be 
assembled into chunks of program called “scripts”. These 
blocks can be used for collecting input, processing information, 
and displaying the output on screen. 














Program flow computer systems, or sensors. Output, on the other 
A program can receive information (input), do hand, can be given on the screen, by a printer, or by 
something with it (process it), and then deliver the sending information to another system. 
result (output). In a game, the input can be the player’s In Scratch, instructions in a program are built 
key presses, and the output is the movement on screen. through code blocks. These instructions always run 
A program may receive input from users, other from top to bottom, unless told otherwise. 
Input blocks Processing blocks 

Sensing blocks . Events blocks 

These blocks check whether sprites or The hat-shaped Events blocks (see p.40) can also be 

colours are touching each other, whether used to start processing scripts when something 

keys are pressed, or are used to ask the happens, such as when the user presses a key ora 

user to enter text (among other things). sprite sends a particular message to other sprites. 





Control blocks 

Control blocks are used to make decisions 
about what to do next. They also dictate how 
often a set of blocks should repeat, and when 
the script should pause. 


J J \ 
* =e < 2 ©. 
io = = = * = 







Using the Blocks Palette 
The Blocks Palette can be found on the 


a= 


ode 


Select this tab to begin 


| Costumes 
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ai @) Sounds | 





extreme left of the Scratch interface. It 
contains nine different types of blocks 
and an “Add Extension” button that can 
be used to add more blocks to the palette. 
The blocks can be accessed by switching S 
between the coloured categories and 
scrolling through the list of blocks 





Looks 





ound 


Cc 


Ti 


Events 











that appear. 

Control 

ce 
Creating scripts £S 
To create a script, click or press a block and Operators 
drag it into the Code Area. Drop the block 
below another block and they will snap Wearables 
together to make a script. If the blocks fail to 
snap together, it means they cannot be used 

My Blocks 


that way, or they are not close enough to attach. 








Motion 


Select a block and drag 
it to the Code Area 





when a clicked 





Join the blocks 
together 


Click on a coloured 
category to see the 
list of blocks in it 











Operators blocks 

These blocks are used for maths, and comparing numbers 
and pieces of text, as well as analysing text. They can also 
be used to generate random numbers, and are great for 
adding surprises to a game. 


Variables blocks 

Variables blocks are used to store information, such as 
the current score of a game. They can also be used to 
store text. Certain blocks in this category can increase 
or decrease a variable’s number. 















Output blocks 


Motion blocks 

Motion blocks display the output of a 
program by moving and controlling 
the sprites on the Stage. 





Looks blocks 


These blocks can alter a sprite’s costume, change fo 
the background image, and display information in ihe 

a speech bubble. They can also change a sprite’s 
size and visibility, and apply special effects. 





Sound blocks 


Sound blocks are used to add sound 
effects to a program. They provide audio 
output by replaying recorded sounds. 








Output using 
movement 


scratch is an ideal language for programming simple games and 
applications that move images around the screen. It has a set of 
blue Motion blocks that can be used to control a sprite’s movement. 








-240 <—- 20 28 —> 240 
Coordinates 180 | xandy grid 
In Scratch, any position on the Stage can be t LX Hsien aie fal 
pinpointed using the x and y coordinates. The x ed Abate a dd lines every 60 fone Try 
axis runs from -240 on the left to 240 on the right, 2: | (x=-120, y=60) these positions in the 
« O Motion blocks (below) 
and the y axis runs from -180 at the bottom to 180 >: for moving a 
at the top. When writing a program, coordinates LN sprite using 
can be used to place a sprite in a particular position. i a iki Pda [A coordinates. 
med (x=60 een 
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Moving sprites using 
coordinates 

These Motion blocks can be used to 
move a sprite to a particular position 
on the Stage using coordinates. The 

go to x: y: block and set x to and set y to 
blocks are often used to set a sprite’s 
starting position. 


Set sprite position 

Makes a sprite jump to a particular 
point on the Stage. The numbers in 
the block can be edited to choose 
different coordinates. 


Move sprite in given time 

This block smoothly moves the sprite 
to a particular point. The time taken 
for this journey can be specified in 
the input area for seconds. 





Alter x position 
Changes the x position by the 
number in the block, without 


changing the y position. It is 
used to move a sprite sideways. 


Change x position 

Moves the sprite to a particular 
X position, without changing its 
y position. The sprite will jump 

straight there. 


Alter y position 
Changes the y position 
by the specified number, 
without changing the 

X position. 











& 





Change y position 


Moves the sprite to a particular 

y position, without changing its 

X position. As with the similar x block, 
the sprite jumps straight there. 


Show x position 

This block does not move a sprite, 

but shows the sprite’s x position when 
clicked. Drop it into other blocks to 
use this coordinate in a script. 








Show y position 

Does not move a sprite, but shows its 
y position. It can also be used with 
other blocks. For example, a sprite can 
be made to say its y position (see p.38). 
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Moving sprites using directions 


Scratch calls each position on the Stage a step. A sprite can be 
moved by pointing it in a particular direction and then making 
it walk forwards. The direction 90 degrees will make a sprite 
face right. This is the default direction for most sprites. 





Move sprite 

This block moves the sprite 10 steps across the 
Stage. However, since this is just one movement, 
the sprite will appear to jump, not walk. 


Rotate sprite clockwise 

Changes the sprite’s direction by 15 degrees 
clockwise. As with all blocks with input areas, the 
number of degrees can be changed as required. 
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Drawing with pen blocks 

Fach sprite has a pen, which it can use 

to draw a line as it moves around the Stage. 
The thickness (or size) and colour of the 

line can be changed as required. The 

pen down block is used to draw, while 

the pen up block turns off the pen. The 

Pen blocks are an extension in Scratch 3.0. 
They can be found under the Add Extension 
section of the Blocks Palette. 


Drawing a triangle 

Try this script to draw a triangle using 
the pen and movement blocks. Click 
on the script to run it. The erase all 
block in the Blocks Palette can be 
used to wipe the Stage. 












Rotate sprite anticlockwise 

This block changes the sprite’s direction by 15 
degrees the other way. The value in the degrees 
input can be changed by the user. 


Change sprite’s direction 

Sets the sprite’s direction to a specific number. The 
direction numbers are measured from 0 at the top 

to 180 going clockwise, and -180 going anticlockwise. 


Stops the sprite 
drawing as it moves 
to the start position 


Turns the 
pen on 





The script 
changes the 
pen colour each 
time it runs 


100 is the 
length of 
the side 


120 is the 
angle to turn 
for a triangle 





Output using 
looks and sounds 


In a game, sprites often mutate or play sound effects to tell players 
what is going on. Changing a sprite’s appearance or playing sounds 
can be useful in other programs as well. It can be used to warn 
users or get their attention to look at something important. 


In Scratch, sprites can display 





messages through speech and Speech bubble Timed speech bubble 

This block displays a speech bubble Using this block, a message can be displayed for two 
thought bubbles. These are ; containing “Hello!” until a new say seconds before it disappears. Both the message and 
created using the say and think or think block is used. its duration can be changed. 


blocks from the Looks section 


of the Blocks Palette. The holes think: @immmas) 
in these blocks can be used to 





change the message to be Thought bubble Timed thought bubble 

; This block uses a thought bubble to This displays a thought bubble that disappears after 
displayed, or to drop another display a message until a new say or two seconds. Again, it is possible to change both the 
round-ended block in it. think block is used. message and its duration. 


Changing a sprite’s appearance “clear graphiceffects 
The Looks blocks can be used to show a sprite’s reaction to 
a game event by giving it special effects. They can also help Remove effects 


; Th foc k In Scratch, each sprite can have its 
to display a message. There are even blocks to make a sprite own special effects. This block removes 


visible or invisible on the Stage. all special effects applied to a sprite. 


Change costume Change size Hide sprite 

This block changes a sprite’s costume to a Makes the sprite’s size a particular Makes a sprite invisible on the Stage. 
particular image. The menu can be used percentage, considering its default It can still move around using the 

to choose which costume to display. size to be at 100 per cent. Motion blocks. 


Show next costume Change effect Show sprite 

Useful for animation, it switches to a sprite’s Increases (or decreases) a special effect using Makes a sprite visible on the Stage if 
next costume or goes back to the first one, a positive (or negative) number. Both the it has previously been made invisible 
depending on the sprite’s current costume. number and special effect can be changed. with the hide block. 


Alter size Set effect 

Changes the sprite’s size by the percentage Used to give special effects a particular 
entered in the block. Using a negative number value, no matter what the current value 
shrinks the sprite. is. Used with 0, this turns off the effect. 
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MUSIC BLOCKS 





The Music blocks in Scratch are an extension, 
and need to be added using the Add 
Extension button on the bottom left of the 
Blocks Palette. They make it possible for 
programmers to use blocks to play musical 
notes. It is not necessary to know the number 


for each note, since clicking the hole for the 
note number will display a piano keyboard to 
help enter the required music. 





Scratch’s set 


instrument block has 
21 built-in instruments 


Playing sounds 
Sounds are a great way to 
provide feedback in a game 
or as an alert in a program. 
Before a sound can be used, 
it has to be added to the 
sprite from the Choose 

a Sound button under the 
Sounds tab. Programmers 
can either use a sound from 
the Scratch Sound library, 
or can record or upload a 
sound of their own. 


Cam, 


1 @ 


/\\ 








play sound until done 


Pause script to play sound 

Sets a sound to play, and then pauses 
the script until it is finished. The menu 
in the block can be used to choose a 
different sound. 


start sound 


Play sound in background 

Starts playing a sound, but does not 
pause the script. The sound plays in 
the background while the script runs. 


stop all sounds 


Stop all sounds 

This block stops all the sounds, no 
matter which sprite started them, 
or how many sounds are playing. 
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change effect by 


Alter pitch 

Changes the pitch of a sound effect. Positive 
numbers make the pitch higher and negative 
ones make it lower. The stereo setting can 

be adjusted as well. 


set effect to 


Reset pitch 

Resets the pitch or changes it to a value 
specified by the programmer. It can also be 
used to adjust the stereo left/right setting. 


clear sound effects 


Remove sound effects 

This block resets all of the sound 
effects previously applied to sprites 
or backdrops. 








h/\ NI 





Managing 
program flow 





When writing code, programmers not only have to tell the computer 
what to do, but also when to do it. In Scratch, the Control and Events 
blocks are used to manage when an instruction 1s carried out. 


Event-driven programming 

In event-driven programming, the program's actions are started by events, 
such as user input, sensor input (see pp.46—47), or messages sent by other 
programs or parts of the program. The Events section of the Blocks Palette 
contains blocks that can start scripts when something happens. Also 
called hat blocks due to their shape, these Events blocks provide many 
more ways to start scripts than simply clicking on them. 


Use mouse click to start 

This block starts the attached script when 
the sprite is clicked. It is ideal for creating 
on-screen buttons for users to click on. 


en GE] Mypened 


Use key press to start 

Starts a script when a key is pressed. The 
menu in the block can be used to select 
the required key. 





fcr 


Use sounds to start 

When the microphone detects a volume 
more than 10 (on ascale of 0 to 100), the 
script can be activated. 





Use background to start 

This block is particularly useful in story-based 
projects. It enables scripts to start when 

the scene (or background image) changes. 





Use green flag to start 

Provides an easy way for users to start the 
program. Copies of this block can be used to 
start multiple scripts simultaneously. 


Guim 





Use message to start 

Scripts can send messages to each other 
(see pp.48-49). This block starts a script 
when a particular message is received. 
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Making a clickable drum 

This example uses an Events block to make a simple 
clickable drum. When the drum is clicked or tapped 

on the Stage, the script plays a sound and briefly changes 
the image (or costume) to show that it is playing. 


The blue highlight indicates 
this is the selected sprite 


) 


a) Add the Drum Kit sprite 
Hover over the Choose a Sprite 


icon in the Sprite List and select the 
magnifying glass to see the library. Sprites 
are listed alphabetically. Scroll down to 
find the Drum Kit sprite and click or tap 
on it to add it. 











@ Add the script 
Select the Code tab and add the following 


script to the Drum Kit sprite. The sprite already 
has the required sound. Click the sprite on the 
Stage to hear it play, and see its playing costume 
for half a second. 


This costume 
indicates that the 
Drum Kit is playing 


Reverts to 
the original 
costume 


Using loops to repeat 

A loop is a part of a program that needs to be 
repeated. In Scratch, these blocks are placed 
within the bracket of a repeat block, so that 
Scratch knows where the repeating section starts 
and ends. The bracket automatically stretches to 
make room for longer sets of instructions. 


Itis possible 
to change the 
number of 
repetitions 










Starts the sprite 
drawing 


The movement 
instructions draw 
one side and turn 


This marks the end 
of the repeating 
section 





Drawing a triangle 

In the previous example of drawing a triangle (see p.37), 
three copies of the instructions for moving and turning were 
added. The script above, however, uses a loop, which is much 
easier to read and write. 


INTRODUCING DELAY 


It is not always desirable to have 
a program run as fast as possible. 
In many cases, a program may 
need to be slowed down so that 
users can easily see what is going 


on and have time to respond. 
Games are often artificially 
slowed down in order to ensure 
that players can keep up. 


Normal movement 

In this example, the program runs so 
fast that the sprite’s movements are 
not visible. Nothing seems to happen. 
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Repeating forever 

Sometimes a program needs to repeat 
forever, until explicitly stopped. For example, 
a simple animation or game can play 
indefinitely. The forever block repeats a set 
of instructions without ending. This block 
has no nub to join other blocks underneath it, 
since it never ends. To end the script, click 
the red Stop button. A stop all block may 
also be used to stop the script. 












Encloses the blocks 
that will repeat 
without end 


These Motion 
blocks draw 
the triangle 


Stops the program from 
drawing while it moves to 
the next starting position 


Drawing infinite triangles 

This script will draw triangles in random positions 
forever. As shown above, a repeat loop can be 
placed within a forever loop. A loop inside a loop 
is called a nested loop. 


Delayed movement 
Introducing a wait block makes 
it possible to see the sprite move 
from right to left and back again. 





Manipulating data 


Programs are often used to manage and process data. This data 
is either provided by the user or collected from other computer 


numbers and text stored in variables. 


Variables 

Many programming languages use variables 
to store information. A variable can store one 
piece of information, either text or a number. 
In a game, for example, two variables might 
be used to store the player’s name and score. 


Make a variable 

To create a variable in Scratch, select Variables in the Blocks 
Palette and click on the Make a Variable button. Give the new 
variable a meaningful name, such as score, so that the code is easy 
to understand. Usually, variables need to be created for all sprites, 
which means that all sprites can see and change the variable. 








' Make a Variable 





The new 
variable will be 
displayed here 


@ Use blocks with your variable 

Use the set [variable name] block to reset 
the variable’s value. For example, set score to 0. The 
change [variable name] by block can be used to 
increase or decrease the value. 





systems. In Scratch, the Operator blocks are used to manipulate 


Strings 

Programmers often call a piece of text ina 
program a “string”. For example, a string can 
be a name, an answer to a question, or an entire 
sentence. In Scratch, any variable can store a 
number or a string, and it can store different 
values at different times. 


Join strings 

This block can be used to join two strings. The strings are 
joined without a space, so the result for this example will be 

“applebanana”. Variable blocks can also be used in place of 
words typed into the block. 


Extract letters . . 
This block extracts one letter from a string. In this 
example, the first letter of the string “apple” is extracted. 


Count a string 

The number of characters in a string can be counted using this 
block. The result for the block can be viewed by clicking on it. 
It can also be dropped into other blocks to use in a script. 


Check strings 

This block checks whether the second string input is in the first 
one, and gives the answer as true or false. It is also possible to 
check for more than one letter: apple contains app? 









Numbers 
Operator blocks are a core part 
of Scratch, and can be used for 


arithmetic operations, comparisons, 


and to pick random numbers. 
Some operator blocks even work 
with strings. 


Used for 
subtraction 


Used for 
addition 








Computers use 
the symbol / for 
division 


Computers use 
the symbol * for 
multiplication 





Chooses a random number 
between 1 and 10 
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A list is used to store similar pieces of information, 
such as a list of names. In Scratch, a list can be created 
from the Variables section of the Blocks Palette. List 
positions are used for inserting and deleting items. For 
example, the delete 2 of [list name] block can be used 
to remove the second item from a list. 





Length of the shapes sides 
is randomly chosen, 
between 10 and 100 





when ee clicked 





The angle to turn is set at 
360 degrees divided by 
the number of sides 





set | length of sides w | to 
set to 












number of sides 





set | angle to turn w | to 


repeat number of sides 


length of sides 
angle to turn 






This repeats the 
code to draw 
each side 


a 
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Moves the sprite 
out of the way 


Drawing random shapes 

The program above draws a random shape each time the green 
flag is clicked. Start by making the variables length of sides, 
number of sides, and angle to turn. Click the green flag 
several times to create random art. 





Drop the variable 
blocks into hole in 
the Motion block 









Making decisions 


Decisions in Scratch can be made using the if-then block or the 
if-then-else block. The required Boolean expression is placed 

in the diamond-shaped hole. If the expression is true, the blocks 
inside the if block’s bracket will run; otherwise, they are ignored. 


Make a high score recorder 

This script checks whether the 
player's score is more than the high 
score. If it is, the high score variable 
is changed to the player's score. 


Using the if-then-else block 

The if-then-else block can be used 
to add instructions that are run when 
the Boolean expression is false. This 
extends the example above with a 
message if the player's score is not 
more than the high score. 


Boolean expressions 
Used for making decisions in 


programs, a Boolean expression 


returns a value that is either 


“true” or “false”. For example, the 
< operator block checks whether 


the number on the left is less 
than the one on its right. 





Logic and 





decisions 


Programs can be made more flexible and useful 

if they are coded to make decisions about what to 
do next. They can use variables to control which 
instruction to run, and when to run them. 





These blocks 
only run if the 
variable score 
is more than 
high score 


This block only runs 
if the variable score 
is less than or equal 
to high score 
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Combining expressions 

Boolean expressions can be combined to make decisions 
based on more than one factor. Here are some examples 

using the current year Sensing block. It has a menu in it 
to change the year to other time periods. 





Using the and block 

The and block has spaces for two Boolean expressions, and it checks 
whether both expressions are true. In this example, the program 
checks the month and date to give a special Valentine's Day message. 





Find this block under the Looks 
Using the or block section of the Blocks Palette 
The or block checks whether either expression is true. In Scratch, 
the week starts with day 1 being Sunday. This example checks the 
day and displays a message if it is Saturday or Sunday. 





Using the not block 
The not block can be used to run instructions if 
an expression Is not true. This example displays 





USING BOOLEANS 


Boolean expressions can Using Booleans with loops 
be used in other ways as The repeat until block repeats 


well. Clicking on them in one or more instructions until 

the Code Area allows users an expression is true. In this case, 

to see their results while ie alebel gaia Se a a 
player has no lives left. 

programming. They can also 

be combined with repeat 

and wait blocks to make a 


Waiting using a Boolean 

Using a wait until block will pause 

program repeat or pause a script until an expression is true. 

until something changes. However, it is often better to use a The program takes no 
broadcast (see pp.48-49). action till the score is 50 










Input 


Sometimes programs need to receive information in order 
to deliver a result, or output. Scratch has several ways 
of getting input, including through key presses, 
by sensing on-screen interactions, and by 
asking users to type in information. 





User interactions 
Users can type information into 
the computer, or use the keyboard 
or mouse to provide movement or 
positioning instructions. 






Types of input 

There are a lot of different ways in which 
information can be entered into a computer 
system for processing. In Scratch, input to a script 


; External information 
is usually in the shape of a rounded block that Gera nrc ice hence namerorine 
contains some information, or a pointed block logged-in user, the current date and time, 








that contains a Boolean expression (see p.44). TAN ene ON Google 
X 5 


Information for processing 
Sometimes programs are given some 
information to work with. For example, 
a program might have a list of items to 
add up for a shopping checkout. 


Sensor input 

Some computer systems can sense the outside 
world. In Scratch, it is possible to detect the 
loudness of sounds and video camera 
movements. Sprites can detect each other. 














Moving under keyboard control 

In many games and other programs, the user 
presses keys on the keyboard to move objects or 
make things happen. Scratch has an Events block 
that starts a script when a Key is pressed. However, 
for smoother movement, a script can use a loop that 


continuously checks for key presses. changeyby(IO) 


up by 10 





If the up arrow is pressed, 
the sprite’s y position goes 


This block 
moves the 
sprite down 


Movement script 
This script illustrates 
how to move a sprite 
under keyboard control, 

using the arrow keys. It changexby TO) 
uses the pen to drawa 
line as it goes, so it can 


also be used as a simple 
art program. 





Collision detection 

Video games often need to detect when two 
objects touch each other, which can require tricky 
calculations. However, Scratch has this capability 
built in. The touching mouse-pointer block has a 
drop-down menu that can be used to detect if a 
sprite is touching the mouse-pointer, the edge of 
the screen, or another sprite. 


Making the Dodge Ball game 

Here is a simple game to demonstrate collision 
detection in Scratch. Start a new project and add 
the keyboard control script from the previous page 
to the Cat sprite. 


a Add the Soccer Ball sprite 
Select the Soccer Ball sprite from the Sprite 


library and add it to the project. Then click on the 
sprite in the Sprite List and give it this script: 


Colliding with colours 

Scratch also has the ability to detect whether a sprite 
is touching a particular colour. This can be used, for 
example, to detect when a ball has crossed a goal line 


by making the line a certain colour that does not appear 
anywhere else on the screen. 


Adds a random delay 
before moving 







Zooms towards 
the player's sprite 
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This block can be 
found under Sensing 
in the Blocks Palette 


The drop-down menu lists 
the available options 


@ Add the cat’s code 
Add these two scripts to the Cat sprite. The first 


script checks whether the ball has hit the cat. If so, it uses 
a broadcast (see pp.48-49) to trigger the second script to 
show a message. 


Senses whether the ball 
is touching the cat 






Displays a message 
when the cat is hit 





Detects whether a sprite 
is touching a colour 


is touching another 





Text input from users 
The ask block can be used to get users to type in 


information. The question inside the block appears 


in the sprite’s speech bubble. Whatever the user 
types goes into an answer block. This program 
greets the user by name. 


This block stores the 
information entered 


=. 








Sending messages 


One of the ways that programs, or parts of a program, 
can interact with each other is by sending messages. 
Scratch has a dedicated Events block — the broadcast 
block — for this purpose. 






Understanding broadcasts 
Broadcast blocks make it possible to 
send a message from a script that can 
be seen by all other scripts for all other 
sprites in a program. Scripts can be 
set to start when they receive the 
broadcast message, either for the 
same sprite (see p.47), or for different 
sprites. The when I receive block is 
triggered in response to an incoming 
message, while the broadcast block 
allows sprites to send messages to 
other sprites. 








Using broadcasts 

In Scratch, a single broadcast can trigger multiple 
Sprites to run their scripts. In the example below, 
when the Speaker sprite is clicked, it starts playing 
music and also broadcasts a message. This message 
then triggers the other sprites. When the music ends, 
another message is sent, which makes the Ballerina 
Sprite stop dancing. 


Send the broadcast 

Click Speaker in the Sprite List and add the following script 
to it. Find the broadcast blocks in the Events section of the Blocks 
Palette and click the menu to enter a new broadcast message. 











The default sound 
effect for the sprite 


youn CER wide 


Sends a message when 
the music ends 


1 Add new sprites 

Start a new project and delete the default Cat sprite. 
Then choose the Ballerina, Butterfly 2, and Speaker sprites from 
the library. Click the Choose a Sprite icon and use the Search 
box in the Sprite library to find them. 


— | | Be 


Ballerina Butterfly 2 


Trigger the Butterfly 2 sprite 
Next, click and drag the Butterfly 2 sprite on the Stage to 


move it away from the speaker. Add this script to Butterfly 2. When 
it receives the message indicating the music has started, the butterfly 
will fly towards the speaker. 





Moves the 
Butterfly 
sprite to the 
Speaker 
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SENSIBLE MESSAGES 


The default name for a broadcast message 

in Scratch is messagel, but this can be 
renamed by the user. To make a program 
easier to understand, it is advisable to change 
the message to something relevant. The menu 
in the broadcast blocks can be used to choose 
a new message name. 





4 Trigger the Ballerina sprite 
Select the Ballerina sprite in the Sprite List and add WHY BROADCAST? 
these two scripts. A variable is used to store whether the 


Ballerina should be dancing or not. When the music begins, Broadcasts can be used for several purposes 


this variable is set to “yes” and the ballerina starts dancing. Se eraceh MW fth 
The dance moves repeat until the dancing variable is set OCC Oera ae ele 


to “no”. This happens when the Speaker broadcasts the 
“music off” message. The outcome is that the ballerina starts 


most popular uses of broadcasting: 


dancing when the music starts, and stops when it ends. - Synchronization: Broadcasts can be 
. used to trigger several scripts across several 
The ballerina sprites to start at the same time, so that they 










keeps dancing 
until this variable 
stores “no” 


can be synchronized as a group. 

- Making other sprites move: Though a 
sprite can only move itself, it can also tell 

other sprites when it is time for them to move. 
For example, clicking the Speaker sprite also 
triggers the other sprites to move. 

- Enforcing a sequence: It is possible to make 
sure scripts run in the right order by using 
broadcasts to trigger them. The broadcast 
and wait block sends a message, but the script 
does not continue until every script that receives 
the message is finished. 


% 
Moo Ss POE oe 


Adds a pause between 
each costume change 


When the music 
stops, the variable 
is set to “no” 





Using functions 


A function is part of a program that performs a particular task and 
can be reused. Functions make code easier to read, write, and test. 
In Scratch, each block is a function, and users can define new blocks. 


How the program flows 


When a script is run, Scratch carries out one in the function. When the function ends, Scratch 
instruction block at a time, from top to bottom. When picks up the main script where it left off. Functions 
the instruction is a function, Scratch remembers its can be used by multiple scripts, and can accept 


place in the script, and switches torun the instructions information for processing. 












FUNCTION 
BLOCKS RUN 


Define your own blocks 

To avoid repeating chunks of code multiple times, 
Scratch allows users to create their own blocks. 
Each new block can be made up of several 


Make a new block 
Go to the My Blocks section of the Blocks Palette 
and select the Make a Block button. Name the block 
“draw a triangle of size”. 


My Blocks 


Make a Block Button to make 
a new block 


3 Define your script 

Add the following instructions to the define block. 
The number the function receives goes into the length 
block. To use it in the script, drag this variable block from 
the define block into the move 10 steps block. 





Pen blocks can be found 
under the Add Extension 


section of the Blocks Palette 


Turns at the 


triangle’s corner 










This block makes the 
three sides of the triangle 


Stops drawing after 
the triangle is made 







thea functions OU f OL 


instructions. The example below illustrates how to 
create a function to draw a triangle, and then use it to 
draw triangles of three different sizes, stacked on top 
of each other. The end result looks like a fir tree. 





Add and name an input 

Select the option to add a text input. A new 
input area will appear in the block. Name this “length” 
and click OK. 





Using the new block 

The new block can now be used ina 
program. Add this script to the Code Area, 
and when the green flag is clicked, Scratch 
will draw three triangles. 


Program starts 
when the green 
flag is clicked 





Select a green 
colour here 


100 goes into 
the function's 
length variable 


This block 
positions 
the triangle 


WHY USE FUNCTIONS ? eee 


Nearly all programming languages use functions in some 


way. Here are some advantages of using functions: 
* Once a function is written, it can be reused in 


other programs. 
* When each function has a meaningful name, programs 
are easier to read. 
* When functions are reused, programs tend to be shorter. 


- It is easier to write and test many small functions 
rather than one large program. 

The example above would be longer, more 

complicated, and harder to understand if each 

instance of “draw a triangle” were replaced by all 

of the blocks in the function. 





Travel translator 


Travellers like to use translation apps to help them communicate 
in foreign languages. Using Scratch’s extension blocks, this project 
will create a simple text translator. You can use it to translate any 
text into dozens of different languages. This can be the perfect app 


for your next holiday. 


How the app works 
To use this app, users first need to select a language 
they want to translate the text into. The program then 


prompts the user to type in the phrase to be translated. 


Once the user enters a phrase, the app displays the 
translated text in the chosen language on the screen. 


Click here to Click here to 
run the project stop the project 





Translating languages 


This project uses the Scratch’s Translate 
extension to convert one language into 
another. The blocks in this extension use 
the Google Translate API for the translations, 
so make sure you are connected to the 
Internet when using the app. 


Using the say block, 
translations can be displayed 
on screen in a speech bubble 


This indicates the chosen language German 
language you will 


be translating 
the text into 


Press the buttons 
to choose the 
language you 

want to translate 

the text into 


You can change this 
sprite to anything 
you like from the 

Sprite library 


You can choose any 
backdrop from the 
Backdrop library 


Wie geht es dir? 


Click this icon to exit 
the full-screen mode 





SCRATCH 
‘Travel translator 


SA hove 


Time: 
15-20 mins 


>» How to add and code sprites 
>» How to use the Paint Editor 


oe 


Difficulty level 


to change a costume 


> How to add Scratch extensions 
to a project 


Program design 

Programmers often use flowcharts — a graphical 
representation of an algorithm — to structure their 
programs and to show how they work. Each step 
is Shown in a box, with an arrow leading to the 
next step. Sometimes, a step could have multiple 
arrows leading onwards, depending on the 
answer to that step. 


FRENCH 
BUTTON 
PRESSED 


Travel translator flowchart 
First, this program waits for the user to 
choose a language. It then waits for the 
user to enter the phrase that needs to 

be translated into the selected language, 
before displaying the translation on screen. 


Good translation apps need to be accurate with 
their translations. The code used in this project 
can be reused to translate from a list of languages 
available in Scratch. You can also experiment by 
adding blocks that speak the translation out loud so 
you don't need to worry about your pronunciation. 




















wy 


. RUSSIAN 
- GERMAN BUTTO BUTTON 
PRESSED PRESSED 





= SETTING THE SCENE 


Setting the scene — (a) START A BLANK PROJECT 
To begin coding this project you Let us start with a fresh, blank project. Choose 





first need to create an account on Scratch New from the File menu at the top left of the Scratch 
interface. This creates a brand-new project. 


by clicking on “Join Scratch”. Then start a 
new project and add the sprite and backdrop 
required to create the app. You can then build 
the code by joining together coloured blocks. 





Select this option to 
start a new project 













DELETE THE CAT 


Scratch’s mascot is the Scratch 
cat. The cat is automatically added to every 
new project. You will not need it for this 
app, so delete it by right clicking on it in 
the Sprite List and choosing “delete”. 


Sprites can also be deleted 
by clicking the blue cross at 
the top right of their icon 





duplicate 


export Click here 


A selected sprite is to delete 






ADD A NEW SPRITE 
Scratch comes preloaded with a lot of 
sprites that you can use in your projects. These 
include characters and other objects. For this 
project, add a sprite named Devin. At the bottom 





right of the Sprite List, select the Choose a Sprite Type in the name of Sprites are grouped 
icon to open the Sprite library. You can scroll the sprite you want under several 
through the sprites, or type “Devin” in the search to search for categories for 

bar to locate it quickly. Then select the sprite to easy access 


add it to the project. You can also create your own 
sprite (see pp.32-33). 





SPRITE LIBRARY 


Sprite Devin Sy -21 





This menu is at 
the bottom right 
of the interface 


Direction 90 





SPRITE LIST 


eeeeeececoeoeoeea eee eee eee eee eee ee eee 


1.4 | CHANGE THE BACKDROP 

It is now time to set the stage. Scratch uses 
backdrops to set the scene for each project. Like the Sprite 
library, the Backdrop library comes with a collection of 
backdrops you can use. You can even create backdrops if 
you like. Click the Choose a Backdrop icon at the bottom 
right of the screen. Type “Theater2” to search for the 
backdrop, and then select it to add it to the project. 


All the action happens in the 
Stage area, which serves as a 
miniature screen 
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Create your own 
backdrop using 
the Paint Editor 





Select this icon 
to open the 
Backdrop library 





Now it looks like Devin is 








standing on a stage. You 
can reposition the sprite by 
dragging it around the stage 











1.5 if A SIMPLE PROGRAM | 
~ Next, add some code. Click 

on Devin in the Sprite List and add 
these blocks by dragging and dropping 
them from the Blocks Palette on the 
left-hand side of the interface. The 
blocks are organized by colour, making 
them easy to find. 





When the project starts, it asks the 
user to type a message. This message 
is then displayed on the screen 





=z) SETTING THE SCENE 


fie TRY IT OUT 
Now run the code and see what happens. Click the 


green flag on the top left corner of the Stage to start the code. Devin will say 
The red stop sign next to it will stop the code. whatever you 


have typed in 
uO co] oe) 


What shal say 
“ 


¢ Type in a phrase and g 
press the tick icon to 
test the project ae 








Testing, testing g 








Adding a language 

At the moment Devin can only speak in English — the 
default language. To proceed with the program, you need to 
add another language that Devin can translate the text into. 
The next few steps will help you create a button for the language, 
and will then add the Translate blocks to begin translating. 


eu ADD A BUTTON 
S 


tart by adding a button to select a different language. _—_ drag it to the top left of the Stage. Rename the sprite by 


Click the Choose a Sprite icon in the Sprite List and find the clicking the text box in the information panel and typing 
sprite called “Button2”. Select it to add it to the project, then the word “French”. 
Type here to rename the 
sprite, so you know which This gives the position Drag the button toa 
language it is for of a sprite on the Stage corner on the Stage 





Go 


Sprite = French +x = -164 Fy | 103 


Show @©® @® Direction 90 





The new sprite 
appears in the 
Sprite List 





oO 





EDIT THE BUTTON SPRITE’S COSTUME 

You can change the way a sprite looks by changing its 
costume. Select the Button2 sprite to modify it, and then click 
on the Costumes tab at the top left of the interface. This will 
open Scratch’s Paint Editor. You can use this editor to draw your 
own costumes for the sprites, or edit the selected ones. The Text 
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tool lets you add text to an image. Select the Text tool 
icon and click inside the button. Then type “French”. 
This creates a label for the button. You can change 
the font using the drop-down menu, or the colour 





of the text using the Fill option, if you want. 


Click here to open the 
Paint Editor for editing 
a costume 


@) Sounds 


Costume button2-a 


Group Ungroup Forward 


Fill Outline Al Sans Serif 


rk oh 
/“ & 
Ss Ta Text tool 


4 O 
LJ 


Open the drop-down 


Fill tool menu to select a font 


button2-b 
121 x 54 


All the 
costumes of 
a sprite are 
listed here 








Centre the text 
on the button 








This changes the mode 
from vector to bitmap and 
vice versa. You are currently 
working in the vector mode 


ba) ADDING A LANGUAGE 


CREATE A VARIABLE 


project. Select the French sprite and then click on 
the Code tab at the top left of the interface. Go to 
This creates a 








=, 


Variables in the Blocks Palette and click the Make New variable name: 


a Variable button. A dialogue box will pop up to 

create a new variable. Name this variable “chosen new variable that 

language” and select OK. will be used to 
store the name of 


For allsprites © For this sprite only the language you 
want to translate 
Make sure this option is Cancel “OK the text into 


selected, so Devin can use 
this variable TT aa... 


a) SET CHOSEN LANGUAGE TO FRENCH 
Next, add these blocks of code to the French sprite. Type in the 


When the user clicks on the sprite, it will set the chosen - name of the 
language variable to French. This will help keep track of language here 
the language you want to translate the text into later. 


You can find these blocks Pa 


in the yellow and orange = 
sections of the Blocks Palette 








ADD AN EXTENSION BLOCK 





























It is now time to start translating. am 4c ii 
ostumes ) 
You will need to add some extra blocks to == Code - @) Sounds 
do this. Select the Add Extension button & >) 
at the bottom of the Blocks Palette. You Translate 
will see a selection of extra extensions Motion 
that you can add to your projects. Choose @ hy 
the extension called “Translate”. This will kooks 3 
add some extra blocks to your palette : 
in asection called Translate. ©) [| A] 
Sound 
Events 
This block translates one 
© language into another 
Control 
Sensing 
Operators 
Variables 
Every new section is M © \ 
added at the bottom y BIOeKs 
of the Blocks Palette x > 
A 
< 
Translate 
Click here to open the 
Scratch extensions 











EXTENSION BLOCKS 


Scratch’s extension blocks allow projects to communicate 
with hardware or software outside of the Scratch 
environment. Selecting an extension will add more 
blocks to the Palette for you to use. 


Music 

Use these extension blocks to make 
music using a variety of instruments 
and drum sound effects. 


Pen 

This extension enables a sprite to draw 
across the screen like a pen. It could be 
used to create a painting app. 


Video sensing 

These blocks let you connect Scratch to 
your webcam. They can be used to detect 
movement in front of the camera. 


Text to speech 

Use this extension to make your projects 
talk. These blocks use Amazon Web Services 
(an online tool) to read text out loud. 


Translate 

These blocks let you translate text into a lot 
of different languages - this is the extension 
you are using in the current project. 
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Makey Makey 

This lets you connect everyday objects to 
your computer. These blocks allow you to 

use connected objects to control your games. 





micro:bit 

The micro:bit is a palm-sized gadget that 
you can control with the code blocks in 
this extension. 


LEGO® BOOST 

These blocks are designed to make it easy 
for children (or people new to coding) to 
build a set of interactive robots. 


LEGO® Education WeDo 2.0 

The WeDo extension blocks are used 
to control simple robotic projects 
built with LEGO blocks. 


LEGO® MINDSTORMS™ EV3 

These extension blocks are used to make 
projects that control more advanced 
robots built with LEGO blocks. 


GoDirect Force & Acceleration 

This extension lets you use an external sensor 
to record forces and acceleration and send 
the information to your Scratch project. 


a UPDATE DEVIN’S CODE 
You can now use the new Translate blocks. 


Click on Devin and change the code to look like this. 
If the chosen language is set to French, then Devin 
will translate the text into French. 


Find this block in the Operators section, 
then drag and drop the chosen language 
variable in the first hole, and type French 


wien PU cites _“— 








Update the purple 
block with this 
Translate block 


Ez) ADDING A LANGUAGE 


eval TRY IT OUT 
Test the code. Press the _ 
French button, and then click the A O GE 


green flag to run the project. Next, 


type a phrase you want to translate A Scary aes French 
and click the tick icon to enter it. gulag 


Reposition the button to 
avoid overlapping with other 
elements on the Stage 


Le temps est magnifique 


Devin will give the French 
translation of the text you 
enter. Here you can see the 
French translation of “The 
weather is beautiful” 








Adding more languages 

You can increase the complexity of the app and 
make it more useful by adding more languages to the project. 
Start by creating buttons for each new language and then 
adding the Translate blocks, just like before. You can add 
as many languages as you like. 


CREATE MORE BUTTONS 

In this step you will make a few 
more buttons so you can translate into Sprite | German ty 104 
other languages. Scratch makes it easy to 
do this. Right click on the French sprite in 
the Sprite List and choose “duplicate”. This 
creates a copy of the sprite and all the code 
associated with it. Create two duplicates 
and rename them German and Russian. 
You can choose other languages if you like. 








Show @® @® Direction 90 


Select this option 
to duplicate a sprite 


French 


Remember to rename 
the new sprite German 


export 





delete 
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3.2 | EDIT THE NEW BUTTONS 
™ You now need to make some 
changes to the code for each of these 
new sprites. Edit the code for the 
German and Russian buttons to look 


like this. set | chosen language w | to (German ) 


Type this for the 
German sprite 


when this sprite clicked 


when this sprite clicked 


set | chosen language v to (Russian) 


Type this for the 
Russian sprite 


3.3. UPDATE THE COSTUMES 
* Next, you will also need to edit the costumes 
for these new sprites so their label reads German and 
Russian, and not French. Remember to click on the 
Costumes tab to open the Paint Editor and then use 
the Text tool. Make sure you are in the vector mode. 


a LIE 





chosen language Russian 


Drag the buttons 
to the top of the 
Stage and align 
with the button 
for French 




















f 3.4 | UPDATE DEVIN’S CODE 
, © Finally, click on Devin in the Sprite List and edit the 
code to get the correct translations. You can duplicate the 
original code by right clicking on it and selecting “duplicate”. 
Then just make the edits so it matches the code shown here. 











| | _ Duplicate these 
blocks of code 
to save time 








Edit these code 
blocks to show the 
correct language 
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' ” Congratulations! You have 
now successfully created your first 
app. Just click on the green flag and 
start translating. 
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~) Hacks and tweaks 





Multilingual cis 
Create additional buttons and code blocks so you r¢ 
can translate more languages. Scratch’s Translate 
blocks allow you to choose from dozens of different 
languages. Which ones would you like to add? 





Scroll through 
the list in the 
drop-down 
menu to choose 
a language 


Common phrases 

“Hello”, “How are you?”, “How 
much is this?” - these common 
phrases are useful all over the 





world. Can you adapt your code > 
and use the Translate blocks to see 
the translations for these useful 
phrases without having to type 
them in? You might want to add 


some dedicated buttons to do this. Add the phrase to 
be translated here 









Speak it 

There is another Scratch extension called “Text to 
Speech” that can be used to read text out loud. Tweak 
your code so that the phrases are read out loud. You 
can then listen and learn how to pronounce the words. 





Text to Speech 











Scratch has five different voices 
that you can choose from 







This will read 


the translation 
out loud 








Use the drop-down menu to 
select a voice for your sprite 









Logic puzzle 


Puzzles are a great way to stimulate your brain and help 
develop logical thinking and cognitive skills. This project 
uses loops and Scratch’s Operators blocks to create a 
complex logic puzzle. The program checks the code each 
time a sprite moves. 


What is the puzzle? 
The aim of the puzzle is to transport a lion, a donut, and a rooster 
from one side of a river to the other. You can only fit one sprite 


in the boat at a time. However, if left unattended together, the Complex logic 

lion will eat the rooster, and the rooster will eat the donut. The The complexity in the puzzle arises from 
the restrictions on what sprites can be 

challenge is to work out the logic and get everything over to transported at the same time, or what 


the other side of the river, safely. sprites may be safely left together. 


Click here to start —__ ig C) Be] 


the program 


Click on a sprite 
to make it sit in 
the boat 


Click on the boat 
to make it move 
across the river 


Create your own 
backdrop using 
the Paint Editor 
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» How to use the Paint Editor to << Time: 
create backdrops and sprites 


20-25 mins 


> How to create a simulation Difficulty level 


» How to add complex logic @@ee0d 


to a project 


Program design 

The program waits for the user to select a sprite. 
Once the selection has been made, the user 
attempts to move the sprite across the river. The 
program then checks to see if any of the rules 
have been broken using one continuous loop. If 

a rule is broken then it is game over. If the user 
gets all the sprites across the river correctly, then 
the puzzle is solved. 





Computer programs can simulate real-world 
problems and situations. By using code, it is 
possible to investigate and test different ways of 
solving a problem, often much more quickly than 
it would be to test it in the real world. 











SPRITE 
IS MOVED 
ACROSS RIVER 


NO 





Es) GETTING STARTED 











Getting started 
Starting a project usually involves picking 
sprites and backdrops from the Scratch library. In 
this project, however, you will create your own 

backdrop and even a sprite using the Paint Editor. 
You will then add some code to make the sprite 

move across the screen. 








START A NEW PROJECT 
Create a new project 

and delete the default Cat sprite. 
Remember you can do this by right 
clicking on the sprite in the Sprite 
List and choosing “delete”. 





You can also click this 
icon to delete the sprite 







duplicate 







export 
Select this 
drop-down menu 


DESIGN THE BACKDROP 

Now create a background for 
the puzzle. Click on Backdrops, under the 
Stage section at the right-hand side of 
the interface. Then, select the Backdrops 
tab to open the Paint Editor. 











Find this tab at the top of 
the Scratch interface 


@) Sounds 
Group Ungroup 
& N 
Fill (ial Outline i. Ed 
Copy Paste 


Backdrops 
| 





Click anywhere in this section 
to highlight the backdrops 
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START DRAWING 

You need to draw a backdrop 
that has a river in the middle and two 
grassy banks on each side. First, select the 
Convert to Bitmap button, then use the 
Brush tool to draw the edges of the river. 
Make sure there are no gaps in the lines; 
they need to go from the very bottom 
to the very top. It does not matter if the 
lines are not straight. 








Click this button to switch from 
vector mode to bitmap mode 


Backdrops @)) Sounds 


Costume backdrop] gr ~~ 


1 
Increase or decrease 
this value to adjust the 
a étthiickness of the brush 


Select black from the 
colour palette 


The Brush tool 
is used to draw 
lines freehand 








Draw the lines in 
the painting area 





GETTING STARTED 


ia FILL ITIN 
Next, use the Fill tool to 
colour each section of the backdrop. ca 
Select the Fill icon (it looks like a paint 
pot), then choose a colour from the 


Fill menu at the top left of the Paint FILL TOOL 
Editor. Just click on a section to fill it. 








Make the grassy sections green, and 
pick a shade of blue to fill in the river. 
You can add more details if you want 

the backdrop to look more realistic 





Fis) MAKE THE BOAT 
The stage is ready, so let's add the first sprite. Scratch does use the tools to create a boat. Name this sprite “Boat” and 


not have a boat sprite, so you need to create it using the Paint Editor. size it correctly. You can also choose the Bowl sprite from 
Click on Choose a Sprite and select the paintbrush from the Sprite the Sprite library, if you like. Just make sure to change its 
menu. This will open the Paint Editor. Select the bitmap mode and name to “Boat” and its size to “200” in the information panel. 


Costume ( costumel | rs ™ | 


Choose a colour of 
your choice from 
the colour palette 











Make sure the boat is sized 
correctly on the backdrop 


SCRATCH 68 i 69 
Logic puzzle 


CREATE SOME VARIABLES 

Now you are ready to write the 
code. Click on the Code tab on the top left 
of the interface. Make sure the Boat sprite 
is selected. Then, in the Variables section, 
click on Make a Variable button to create 


three new variables. Name them “boat side”, 
“boat capacity”, and “boat moving”. 





Variables 


Make sure these boxes are 
unchecked to avoid making these 
variables appear on the Stage 














This will be true or a 


false depending on 
the presence of an 
object in the boat 


This will be true when 
the boat is currently 
moving across the river 


This will be used to 
track which side of the 
river the boat is on 


az GET READY TO SAIL 
Next, add these code blocks to the 


Boat sprite. When the project starts, this will 
place the empty boat at the left side of the river. 
You might need to adjust the x and y values so 
that the boat sits correctly on the backdrop you 


from the sprite information panel into the script. 





The boat is empty 
when the project starts 


created. You can drag the boat to place it where goto OVO 
you want and then copy the x and y position set [boatsidev]to (eft) The boat starts 





Press the green flag 
to run the project 








The boat should 
be sitting on the 
left side of the river 


on the left side 
of the river 


The boat is currently 


2/8} 3) 





=. GETTING STARTED 





START SAILING 

Now add this code to make the boat move to 
the other side of the river when you click on it. Try it out 
by running the project and clicking on the boat. The boat 
should automatically move to the other side of the river. 





This script will 
run when the user 
clicks on the boat 







The boat is now moving, 
so set this variable to true 





ot [Restmorige te G2) 
Gap -= 


The x and y values may 
need to be changed 
depending on the way 
you have drawn the river 







If the boat is on the 
left, this moves it 

to the right and 
updates the variables 


Create a new message 
by clicking on the 
drop-down menu and | sdf the boat is on the 
choosing “New message” right, this moves it to 
the left hand side and 
updates the variables 





Click on the boat to move 

it across the river. Click on it 
again to move it back to its 
original position 





Z 
5 | | 

= Hil 
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Add a new sprite 


The boat is ready to set sail. Now you 
need to add another character to the puzzle. 
Add the next sprite, then program it to move 


along with the boat. 


ADD THE LION 

Go to the Sprite library 
and look for the Lion sprite. 
Select it to add it to the project, 
then change its size to 80 in 

the sprite information panel. 








Show 


The Lion sprite 
appears on the screen 
at its updated size 





Sprite “Lion 











The selected sprite is 
highlighted in blue 


a 


tegerte L3G AB 


Change this number to 
change the size of the sprite 


wx -19) ttyl 6. 


ee ee 


——e 


Direction ( 90 


7 


Click here 
toadda 
new sprite 








Ezz) ADD A NEW SPRITE 


ea CREATE THE VARIABLES 
W 


ith the Lion sprite still Variables 
highlighted, go to the Variables section 


of the Blocks Palette and create two | Wie oenariele | 
new variables for this sprite. Call them 
“lion side” and “lion onboard”. If you 


need to rename or delete a variable, 
right click or Ctrl + click on it. 





This will be true if the 
lion is on the boat 





Make sure these 
boxes are unchecked 








This will be used to track 
which side of the river 
the lion is on 


Gz PLACE THE LION 
Next, add these code blocks 
to the Lion sprite to position it on the 
left-hand side of the river when the 
project starts. Remember, you might 


need to adjust the x and y values to 
suit your backdrop. 








Places the lion at the 
top left of the Stage 
when the puzzle starts 





This means the lion 

is not on the boat 
Puts the lion on the 

left-hand side of the river 










Ce GET ON THE BOAT 
W 


hen the user clicks the 
lion, it must move onto the boat. 
Add this code to do that. Click on 
the green flag to try it out. 


These blocks are run only if the 
than one object from being inside 
the boat at the same time 
This moves the 
goto Goaty) lion into the boat 


Find this block in the 

Looks section of the Blocks 
Palette. It ensures that the Lion 
sprite stays in front of the boat 


The boat 
is full 





This means the 
lion is on the boat 


fence Oh Le fe 


MOVE THE LION WITH THE BOAT 
When the boat moves across the river, the EE) 
lion needs to move with it. This will make it seem es [ — Ea 
like the lion is sailing to the other side of the river. 
Add the following code to the Lion sprite to do this, 
then run the code. See if you can move the lion across 
the river in the boat and then back again. 








Click on the lion 
to move it along 
with the boat 


These blocks are run 
when the user clicks 
on the Boat sprite 





When I receive | boat is moving w 
if lion onboard then — This loop runs only if 
the lion is on the boat 
repeat until boat moving 






The lion moves along 
with the boat until 
the boat stops 








If the boat ends up on the 
right, this moves the lion 
to the grassy area on the 
right-hand side of the river 
and updates the variables 


If the boat ends up on the 
left, this moves the lion 
to the grassy area on the 
left-hand side of the river 
and updates the variables 











set | boat capacity wv | to SEE nsurres the boat 
is empty 
set to 





This means the lion is 
no longer on the boat 


=z) ADD MORE SPRITES 


Add more sprites 

The next step is to add more characters to 
increase the complexity of the project. You need 

to code the new sprites in exactly the same way 
as the lion in the previous steps. Then you can add 
some rules that will constantly check if the correct 
logic has been applied to solve the puzzle. 





COPY CODE FROM THE LION 





(3a) ADD A DONUT 


Go to the Sprite library 
and look for the Donut sprite. & 


Select it to add it to the project. 
It is a big sprite, so change its 


size to 50 in the information panel. 

















Sprite Lion Ty 99 


Show @© @® Size 90 


UPDATE THE CODE 


The code for the donut is very similar to the code for the 
lion. Luckily, Scratch makes it easy to reuse code. Click on the Lion 
sprite and find the blocks of code you made in steps 2.3, 2.4, and 

2.5. Drag and drop all of those blocks onto the Donut sprite in the 


Sprite List. This will create a copy of all the blocks for the 
Donut sprite. The blocks may get copied on top of each 
other, but you can right click in the Code Area and select 
Clean up Blocks to set them in order. 


Dragging and dropping 
code blocks onto other 
sprites is a quick and 
useful way to reuse code 





Now select the Donut sprite. You 
will see the blocks you just copied across. 
Update the code to make it work for the donut. 
First, create two new variables, donut side and 
donut onboard, then edit the code blocks 
to look like this. Make sure you uncheck the 
boxes next to the new variables. 





This places the 
donut below the 
lion on the Stage 


This means the 
donut is not on 
the boat 


parse LAIMA 





when this sprite clicked 





set | boat capacity v| to (full) Update this block with 


the correct variable 


set | donut onboard w | to for the donut 





When I receive | boat is moving v 
This loop runs only if the 
if donut onboard then —___ donut is on the boat 
repeat until boat moving 





7: 


if boat side then 


If the boat ends up on the 
right, this moves the donut 
to the grassy area on the 
right-hand side of the river 
- and updates the variables 








J 


set to 


else 


Update these coordinates If the boat ends up on the 
for the donut left, this moves the donut 
to the grassy area on the 


set | donut side w| to left-hand side of the river 


and updates the variables 








set | boat capacity w | to 
set | donut onboard v | to 


= ADD MORE SPRITES 


ADD THE ROOSTER 
Now add the final sprite to the 


program. Go to the Sprite library and look A 


for the “Rooster” sprite. Select it and make 


sure you reduce its size to 50 in the sprite 





information panel. 











For a quick search, type Rooster 
the name of the sprite 
you are looking for 
COPY CODE FROM THE LION 
Next, add code to the Rooster. Just like you This will make a copy of all the blocks. Right click 
did for the Donut, drag and drop all the code blocks anywhere in the Code Area and select Clean up 


from the Lion sprite onto the Rooster in the Sprite List. | Blocks to view the code blocks in an order. 









Sprite Lion + x = -180 ty 140 















Show @© @® Size 80 Direction 90 


Drag and drop all the blocks of 
code from the Lion sprite, just 
like you did with the Donut 


eee 










UPDATE THE CODE 

Now you will need to edit the 
code you just copied. Remember to 
create two new variables rooster side 
and rooster onboard, and make sure 
you uncheck the boxes next to the 


variables. The edited code for the 


This puts the rooster on the 
left-hand side of the river 








Update the coordinates to 
place the rooster below 
the donut on the Stage 


nm PRIA 


when this sprite clicked 





set | boat capacity w | to (full) 
set | rooster onboard w | to Update this block with 


the correct variable 
for the rooster 





When I receive | boat is moving v 
This loop runs only if the 
if rooster onboard then J ____ rooster is on the boat 
repeat until boat moving 








if boat side then 





set | rooster side wv | to 


else 


j 





| _———s—~sUpdate these blocks 
for the rooster 





set to 





ADD THE RULES Click on the drop-down menu 
At this point, you 


and choose “New message” to 


should be able to move when I receive create this message 


the objects back and forth 
across the river. Now it is i 
time to introduce the rules if 
of the puzzle. Add these 
code blocks to the Boat 
sprite. They will check the 
sides to see if any of the 
rules are being broken, or 
if the user has successfully 
solved the puzzle. 








donut side rooster side 











donut side rooster side 





If the lion and rooster are 
left alone on the left-hand 
side then it is game over if 





donut side rooster side 





If the lion and rooster are 
left alone on the right-hand 
side then it is game over 





donut side rooster side 


If the rooster and donut 
are left alone on the 
left-hand side it will be 
against the rules 








donut side rooster side 


= 





If the rooster has been 
left alone with the donut 
on the right-hand side, it 

will be against the rules 











~) Hacks and tweaks 


Design your own scenario 

Use the Paint Editor to change the sprites’ 
costumes and the project’s backdrop to create 
a whole new scenario for this puzzle. Maybe 

it could be set in space, and you need to 
transport aliens from one space station 

to another, but you cannot leave certain 

types of alien together. Use the Sprite and 
Backdrop library to come up with more ideas. 


Experiment with 
other sprites and 
backdrops to create 
different scenarios 








rami 4G Ube 


ak 38 ENFORCE THE RULES 
If t th 
eae Finally, these rules need to be 


right-hand side of the river then 
the puzzle has been solved 





checked at all times. Just update the blocks 
of code you added in step 1.7 with a few new 


blocks. Then run the code and test the logic. Sa 


Find these blocks of 
code in the Boat sprite 


when Ra clicked 








broadcast 






The forever loop will 
constantly check the 
sides to see if any of the 
rules have been broken 





Count the moves Background music 
Can you add a variable that counts how Many puzzle games have simple background music to help the player 
many “moves” the player has made so far? focus. To add music, select the Backdrops icon at the bottom right of 
You will need to add a new variable called the screen, then click the Sounds tab. Go to the Choose a sound icon 
moves and set it to increase by one every at the bottom left and look for “Dance Chill Out”. Then add this code 
time someone clicks on the boat. to make the sound play forever. 
You can pick any sound 
when Pea clicked of your choice from the 
Add this block to the code Sound library 





created in step 1.8 to increase 
the number of moves 





Asteroid dodge 


In this Scratch project, you will create a side-scrolling 
game with animated sprites. This is a great way to 
get started with game development. The finished 
game will test your concentration and the speed 

of your reflexes. 


How the game works Moving obstacles 


The project creates an illusion of 


The game lets a player use the up and down arrow keys to navigate motion by moving the obstacles 
a rocketship around asteroids. The “Warp Speed” slider controls the along the x-axis and making them 
speed of the game, and the rate at which asteroids appear increases appear at random intervals. 


as the game progresses. Any contact between the rocketship and an 
asteroid ends the game. Use the slider to Click here to exit the 
increase the speed full-screen mode 


Click here to —f fF} 
run the project es 


go> Blaster 
Score 
Warp Speed | 


Press the 
space-bar to make 
the rocketship 

fire lasers and 
destroy asteroids 


Choose from 
a selection of 
space themed 
backdrops in 
the library 










SCRATCH 
Asteroid dodge SQ , 61 oom 
(Sa 


In this game, the background and other objects 


20-25 mins move across the screen to make it seem like the 


» How to create a side-scrolling game q Time: 





» How to use loops to create 
continuous game play Difficulty level 

» How to create a game that increases @9@eees 
in difficulty as it progresses 


player is moving. This popular approach is called 
a side-scrolling game, and can be adapted for racing 
or shooting games. 





Program design 
The program uses one main loop to check which key is being 
pressed to move the rocket up or down the screen. It fires a 
laser to destroy asteroids if the space-bar is pressed. Using 
this main loop, the code continually checks if any rocks have 
touched the rocket to end the game. 







= PREPARE FOR LAUNCH 


Prepare for launch 





This project requires a few basic elements to get started. 
The sprites and backdrop will create the space setting for the 


game, and variables will add functionality. 


ADD SPRITES 





Start a new project and delete the default 
Cat sprite. Then add the two new sprites required for 
this game: Rocketship and Rocks. You can find them 
in the Sprite library. 


PREPARE THE BACKDROPS 


The Rocks sprite 
will be an asteroid 
that will try and hit 
the Rocketship 


Rocketship 











You will need two backdrops for this game. 
First, click on Choose a Backdrop in the Stage section 
at the bottom right of Scratch. Then select Space to 
add the first backdrop for this game. You can pick any 
other backdrop from the “Space” category if you want. 


Click here to add 
a new backdrop 


PAINT IT RED 






backdrop 1 


The new backdrop 
can be viewed under 
the Backdrops tab 

















To create the second 
backdrop, go to the Backdrops 
tab and click on the original 
backdrop]. Click on the Convert 
to Bitmap button, and use the Fill 
tool to paint the backdrop red. 
Finally, click the Space backdrop 
again so it will be selected as the 


default background. 
Space 
480 x 360 
Click here to 
make Space the 
default backdrop 











Costume 


Fil 
of 
* 


i 


+. 








Fill tool 


backdrop] rP| “ 


Click here to select 








the colour 
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CREATE VARIABLES 

Use the Make a Variable button 
in the Variables section to create all the 
variables required for this project. Make [ Make a Variable | 
sure the check-boxes for the variables 
Blaster, Score, and Warp Speed are 
ticked so that they show on screen. 





Variables 





This variable counts 

the number of asteroids 
that have been 
successfully dodged 








The gap in seconds 
between new asteroids 
appearing; it gets smaller 
as the game goes on 


Stores the number 
of shots left in the 
laser blaster 


The speed at which 


Stores the the rocket travels 


player's score 








Code the rocketship 

Now that the basic elements required for 

the project are ready, you can begin coding. Start by 
adding code for the Rocketship sprite. The next few 
steps will add steering controls for the rocket, make 
it move through space, and also add a blaster gun for 
firing the laser. 


















PREPARE THE ROCKET 
Select the Rocketship sprite 
in the Sprite List and then add these 

code blocks for it. This will set up the 


rocketship for the game. Makes the sprite 


half its usual size 





Places the rocketship on 
the left of the Stage and 
points it towards the right 


There are three 
shots in the laser 
blaster, but you can 
change this number 
to make the game 
easier or harder 


This block will make 
the asteroids appear 
every two seconds 


CODE THE ROCKETSHIP 


Ea SET UP THE CONTROLS 
FOR STEERING 


Next, update the code added in 
the previous step by adding these 
blocks of code at the bottom. They 
will be used to steer the rocketship 
up and down the screen. 





The forever block ensures 
continuous game play by 
repeating this part of the 

program ina loop (see p.41) 


When the up arrow key is 
pressed, the rocket moves 
higher up the screen 


Pressing the down arrow 
key moves the rocket 
lower down the screen 





above the Stage to run the code run the code 


and test the rocket. See if you 
can make the rocketship move 
up and down the screen using 
the arrow keys. 


TEST FLIGHT 
Click on the green flag ee L | a) [ca {cs |[>3 
wo i ee a" 


Before running the 
code, drag and drop 
these icons to the 
top right corner to 
keep them out of 


Pressing the up and 
the playing area 


down arrow keys 
controls the rocket 


Do not worry about 
the asteroid. This 
will be coded later 





aan etes 64 j 65 


exe) ANIMATE THE ROCKET 25 AVOID THE ASTEROIDS 
Without the flame, it may look like the The next step is to add in some logic. Add these blocks 


rocket has stopped. To avoid this, click on the to the Rocketship sprite. This will tell the rocketship what to do 
Costumes tab and then right click on costume if it touches the asteroids that will be added later. 

number five and choose delete. Next, add the 
code given below to make the rocket appear as 

if it is soaring through space. Test the code before 
going on to the next step. 









If the rocketship touches 
the Rocks sprite then 
it will be game over 







rocketship-c 
128 x 184 


Create this broadcast message 
using the drop-down menu 
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a 2.6 PREPARE THE BLASTER GUN 
= You can also Now you will write the code that controls the blaster gun. 


delete a costume When the space key is pressed, if there are shots left in the blaster 
by clicking on the then the laser fires. To achieve this effect, the background quickly 
small blue cross flashes to the red backdrop, which makes it look like the laser has 


been shot. Add this code to the Rocketship sprite and test the code. 


Checks if there are Plays a laser blaster 
shots left in the blaster gun sound effect 





duplicate 


Reduces the 
number of laser 
shots left by one 








Create a new Quickly changes the 
This loop changes the rocketship’s broadcast message background to red then back 
costume every 0.20 seconds, making called Blaster Fired to Space, making it look like a 


it look as if it is spinning shot has been fired 





CODE THE ROCKETSHIP 


@®eeeeaeeoseoede0e2e20ed202020202000000008080808088080 


era UPDATE THE SCORE 
Now add these blocks of code. This will 


increase the score by one each time five asteroids 
are avoided. Then, it reduces the Gap Time - this 
means new asteroids will appear more often. 


This operator block divides 
the number of asteroids 
avoided by five 








Increasing this number will 

make the game last longer 
if it is currently more than 0.5 
seconds. This means the game 
never gets so difficult that it 


cannot be played 












This reduces the current 
gap time by 10 per cent 





Code the asteroids 

Once the rocketship is prepared, you need to program 
the asteroids. The code in the next few steps will make a 
stream of asteroids move across the screen, making them fly 
across space. An explosion will also be added to indicate the 
asteroids being hit by the blaster gun. 





CREATE THE ASTEROIDS 

To write the code for the asteroids, click on 
the Rocks sprite and add this code. The forever loop 
means that once the game is started, asteroids keep 
getting created. 





Sets the size of 
the asteroids 


This block hides the 
original sprite, so you 
only see the clones 


Once the game starts, 
the forever loop keeps 
creating new asteroids 


— The Rocks sprite is 
highlighted in blue 


to indicate it is the 
selected sprite 


hs 
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MAKE THE ASTEROIDS MOVE 

To create the illusion of the rocketship moving, of the screen. This way the player cannot guess 
the rocks will move across the screen. Once they reach the where the next one will appear, making the game 
left side, they vanish. The random blocks are used so that more challenging. Add this code to the Rocks sprite 
each asteroid starts at different positions at the right side to make this happen. 









The size of the asteroid is 
chosen randomly 


Makes the clone visible on 


the Stage while the original 
show Rocks sprite stays hidden 




















Places the asteroid at the 
right side of the screen at 
a random position 


Makes the asteroids 
spin as they move 
through space 





If the asteroid reaches 
the left side of the screen, 
increases the number of 
avoided asteroids by one 





Removes the 
asteroid 





The rocks will appear on the 
right edge of the screen at a random 
y position, and move towards the left 





Rocks will be of 
random sizes 





33 REMOVE ASTEROIDS CREATE AN EXPLOSION SPRITE 
Now it is time to add some code to fire the Next, add one more sprite to create an explosion 


blaster gun. When this program is run it will destroy the when the asteroids hit the rocketship. Choose “Paint” from 
asteroids when the blaster is fired. Add these blocks to the Choose a Sprite menu at the bottom right of the Sprite 
the Rocks sprite and then test it out. Remember that you List, and name the sprite “Explosion”. 


only have three shots. 


Sprite | Explosion ty| 28 


Show @® Size 100 Direction 90 











Removes rocks when 
they are hit with the laser 








PAINT THE EXPLOSION 

Use the Paint Editor to draw a large fireball 
effect. You can use the Brush, Fill, and Text tools to 
create a large, colourful explosion. 








Costume costume] “a y 
Group Ungroup : Forward Backward: Front Back 


Fill r | Outline Marker 


L 
pe Be Use the Text tool 
or the Brush to 
0 write the words Make the 


3@ xg explosion large 


or 


Using two 
colours makes the 
explosion look 
more impressive 
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HIDE EXPLOSION 

When the game starts, you do 
not want the explosion to be visible on 
the screen. Add this code to the Explosion 
sprite to hide it. 













Hides the explosion 
when the game starts 


Al GAME OVER 
Next, add these blocks of code to the shen rece [ 


Explosion sprite. This will make the explosion This message is 
appear in the middle of the screen when the broadcast when 


Game Over message is broadcast and then the Rocketship 
stops the game. sprite touches 
an asteroid 
This is the opposite of show 
the hide block, so it 
These points are the 


displays the explosion middle of the screen 





This stops all the 
code from running, 
ending the game 


(ea WARP SPEED SLIDER 
One final touch is to right = 
click on the Warp Speed variable Ra ©) CB} 8) & 


at the top right of the screen and ; - 
choose “slider”. This means that bd ee - 

the player can now adjust the ‘Blaster BEB | 
speed of the game by moving . . ° 
the slider left and right. The game 
is now ready to play. See how far 
you can guide the rocketship, and 
do not forget to use the blaster 
when you need to. You can even 
adjust the Warp Speed slider and : — normal readout 
see how fast you can go. A 





large readout 


Choose the slider 
option from the 
drop-down menu 


HACKS AND TWEAKS 


~) Hacks and tweaks 


Add a cheat code to refill your blaster gun 
Adding your own cheat codes is a fun way to 











personalize a project. Add this code to the when [xy | key pressed 

Rocketship sprite so that when you press 

the x key, the blaster is refilled with three set | Blaster v | to (3) Change this number to 
more shots. You can also try to create a increase or decrease the 


sprite that appears every 20 asteroids, and 
increases the number of blaster shots by 
one if it touches the spaceship. 


number of shots to be refilled 


Deep space spectrum 

Add this code to the backdrop and 

it will make the background cycle when Py clicked 
through a spectrum of colours, creating 


a fantastic intergalactic light show. forever 


change [colory] effectby B) opt aera 
will make the colours 





flash quickly 


CZ | 
} ane - { 


e° Warp Speed 5 
e'. ve ee 


Run the code to see 
the changing colours 
of the backdrop 
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Asteroid dodge 


Unidentified flying objects 

You can easily add other objects for the rocketship 
to dodge. Just add a new costume to the Rocks sprite 
and then amend the code as shown here. This will 
make dogs fly through space. 





These new blocks will change 
the Rocks costume into flying 
space dogs once every 10 times 
the code is run 








The space dog 
is added to the 
Rocks costumes 





What is Python? 


Python is one of the world’s most popular programming 
languages. It is extremely versatile, and can be used in 
many real-world situations. A text-based language, the 
readability and clear layout of its code makes Python 


less daunting for beginners. 


Why use Python? 

Created by Dutch programmer Guido van Rossum, 
Python was released in 1991. It was designed 

as a high-level language that would appeal to 
programmers familiar with the C language (see p.347) 
and the Unix operating system. Python lends itself to 
Writing a wide range of programs, and is used by 
many schools and universities to teach programming. 





Features of Python 

Python is a simple and minimalistic 
programming language. It has a 
number of features that make it 

a popular choice for new as well 

as experienced programmers. 


The syntax (arrangement of words and symbols 
forming the code) in Python is close to English 
syntax, which supports its goal of producing readable 
code. In addition, Python also forces programmers 

to lay out their code in a structured way. This is a 
useful skill to develop as it makes it easier for the 
programmer to debug the code, and also improves 
readability for other users. 






Free and open source 

An example of a free/libre and 
open source software (FLOSS), 
Python can be freely distributed. 


Its source code can be read and 
changed, and pieces of its code 
can also be used in new programs. 


Extensive libraries 

One of Python's greatest 
strength are its libraries, 
which contain code for 
performing specialized 
tasks. They make building 
programs easier and quicker. 


— 












Portable 

Python is extremely 
flexible, and can be run 
on a variety of different 
platforms, such as macOS, 
Windows, and PlayStation. 








APPLICATIONS 


How it works 

A Python program, usually called a script, is a text 

file containing words, numbers, and punctuation that 
correspond to instructions. These instructions are 
formed of certain fixed patterns of words and symbols, 
which the programmer types in. IDLE (Integrated 
Development and Learning Environment) is a free app 
that is installed with Python. Designed for beginners, 
it includes a basic text editor that allows the user to 
write, edit, and save code before running a program. 





ENTER CODE SAVE 





Embeddable 

Python scripts can be 
included in programs 
written in other languages, 
such as C or C++. This 
allows programmers to 
enhance their code. 





Simple and easy to learn 
Extremely user-friendly, 
Python code uses 

fewer punctuation 
symbols than most other 
programming languages. 





Great support 

Python has well-written 
documentation, including 
guides for getting started, 
a reference section, and 
lots of example code. 
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What is Python? 


Python is a general-purpose programming 
language that can be used to create systems 
for a variety of purposes. This, along with 

its many specialist libraries, makes it useful 
in fields as diverse as business, medicine, 
science, and media. 


Game development 
Python has various modules 
and libraries that support 
game development. 

These include pygame, 

for 2D games, and 

PySoy, a cloud-based 

3D game engine. 


Space 

Software engineers 

have used Python to create 
tools for NASA's Mission 
Control Centre. These tools 
help the crew prepare for 
and monitor the progress 
of each mission. 


Business 

Python's easy syntax 
makes it ideal for building 
large applications. It has 
become especially popular 
with the rise of Fintech 
(financial technology). 


Scientific computing 
Python has libraries that 
can be used in specific 
areas of science, such 

as PyBrain for machine 
learning and pandas 

for data analysis. 


Web development 
Python is used by 
software developers for 
automated tasks, such as 
build control and testing. 
It can also be used to 
create web applications. 










Installing Python 


It is important to download the right version of Python. 
This book uses the current version: Python 3. It is free and 
can be easily downloaded from the Python website. Follow 
the instructions that match your operating system. 


Python on Windows 
Before you install Python, you need to find out if FLYING CIRCUS eee 


your system has a 32-bit or 64-bit architecture. To 


do that, click the Start menu, right-click This PC, Python is not named after the snake, as many people 
think, but after the British television series Monty 


Python’s Flying Circus. Guido van Rossum, who created 


and choose Properties. A computer’s architecture 
indicates how its MICTOpPLocessor handles data the language, was a big fan of the programme, and 
at the lowest level. A 64-bit processor provides Python was a title that stuck. There are numerous 
higher performance, as it can handle more data references to Monty Python's sketches in Python's 
at once than a 32-bit processor. official documentation. 

























Go to the Python website 
Go to www.python.org and click on Downloads in the 
menu bar on top. A list of operating systems will appear on 
screen. Select Windows. 


Open IDLE 
Once the installation process is complete, go to the 
Applications folder and find IDLE inside the Python folder. You 
can also search for it in the Start menu. Double-click on IDLE 
to open Python's shell window. You will see IDLE’s menu at 
the top of the window. 








https://www.python.org 











Run the installer 
Once downloaded, double-click the installer file 
and follow the instructions that appear on screen. 
Remember to tick the box on the initial prompt that 
says “Add Python to Path”. 


Download an installer 
Find the most recent Python installer, which should start 
with 3. Be sure to select an x86 installer for 32-bit machines 
and x86-64 installer for 64-bit machines. Either the web-based 
or executable installer will work. 











The website could have a more 
recent version of Python 







Python 3.7.3 (64-bit) Setup 


Setup Progress 











Python 3.7.3 - 2019-03-25 
= Download Windows x86-64 web-based installer 
=» Download Windows x86 web-based installer 











Installing: 
Initializing... 


windows 





Installation can be 
cancelled at any point 


Python on a Mac 


Before you install Python, you need to check which operating system 
your Mac uses. This will tell if your system has a 32-bit or 64-bit 
architecture. To find out, click the Apple icon in the top left of the screen 
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Installing Python 





and select About this Mac from the drop-down menu. If the processor is 
an Intel Core Solo or Intel Core Duo it means your system has a 32-bit 


architecture, otherwise it has a 64-bit architecture. 


Go to the Python website 

Go to www.python.org. Hover the cursor over the 
Downloads tab in the menu bar on top to generate a list 
of operating systems. Select the macOS option to find 
the installers suited to Mac computers. 


https://www.python.org 


Download an installer 

Find the most recent Python 3 installer that matches 
your operating system and select it. The Python.pkg file 
will download to your system automatically. 


Choose this installer 
for 64-bit machines 


a Python 3.7.3 - 2019-03-25 
= Download macOS 64-bit installer 
=» Download macOS 64-bit/32-bit installer 


Choose this installer 
for 32-bit machines 





Open IDLE 

Once the installation is complete, open the 
Applications folder from the Finder window's sidebar and 
find IDLE in the Python folder that appears. Double-click 
on IDLE to open Python's shell window and check that 
installation has been successful. 


Run the installer 

Once downloaded, double-click the .pkg file 
and follow the instructions that appear. The installation 
process on a Mac computer is very straightforward. 
It will only ask you to agree to the licencing requirements 
and confirm the installation location (usually the 
Macintosh Hard Disk). 


Welcome to the Python Installer 








Select Continue to proceed 
with the installation 





Shell window 

The shell window is opened as soon as IDLE is launched. It can be 

very useful to try out ideas in this window as it gives instant feedback. Thechelwindow 
However, as the shell cannot save code it is not practical to use this shows the version of 
window to evaluate more than a few lines of code at a time. Python itis running 


Python 3.7.0 Shell 


Python 3.7.0 (v3.7.0:1bf9cc5093, Jan 26 2019, 23:26:24 This information depends 


on the operating system 


[Clang 6.0 (clang-600.057)] on darwin being used 





Type "copyright", "credits" or "License()" for more information 


>>> 





Editor window 
The editor window can be opened DMs 
by selecting New File or Open from 

IDLE’s File menu. This window allows 
programmers to type in much longer and 
more complex series of instructions and save 
them in files. Python file names are easy to 
identify as they end with .py. 















To make code easier to read and errors easier to spot, IDLE 
displays the text in the editor and shell windows using 
different colours. The colour used for each word depends 
on its role in the code. 


COLOURS IN THE CODE 


A Python file displayed Built-in commands Purple print() 
in the editor window 


Symbols, names, 
and numbers 


a helloworld.py Text within quotes Green “Hello world!” 


print("HeLlo world!") Errors Red pront() 


Black 25 





Keywords Orange if, else 


Output Blue Hello world! 


Using IDLE 


Python's Integrated Development and Learning Environment (IDLE) 
interface has two windows for carrying out different tasks. The shell 
evaluates short commands immediately, while the editor window 
allows programmers to enter and save longer programs in files. 





Running a program using IDLE 

To run a program from IDLE, the file containing it must first be 
opened in the editor window. If it runs successfully, the shell 
window displays the output of the code, otherwise the relevant error 
message appeals. 


Python 3.7.0 Shell 


Python 3.7.0 (v3.7.0:1bf9cc5093, Jan 26 2019, 23:26:24 
[Clang 6.0 (clang-600.057)] on darwin 


Type "copyright", "credits" or "License()" for more information 


RESTART: /Users/tinajind/Desktop/helLoworld.py 
HeLlo world! 


>>> 





Common errors _, 
. a, num = 4 Here “num” has 
As well as being case-sensitive, accidentally been 
Python is also very strict about TRAE SS 05) (Sean Reese eee ee ede 
the layout and spelling of code. = z 
It requires sections of code to print ("Hello world!") The mistake in code results 


be indented by four spaces from in this error message 


the line above, in order to 
make the code more readable. Traceback (most recent call last): 
These features often trip up 


new programmers. IDLE helps File "/Users/tinajind/Desktop/heLloworld.py", 


spot and fix errors with pop-up line 2, in <module> 
information boxes and error 
messages (see pp.130—33) in 1 0! | 


the shell window. NameError: name 'nut' is not defined 


>>> 








Variables in Python 


Variables are one of the most basic programming tools used 
for storing and manipulating data. Similar to a box, they are 
a storage mechanism that can hold values used in a program. 


Creating variables 
In order to create a variable in Python, it must be 
given a name and a value. The value can be one of 


various types, such as a number or a String (see p.103). 


However, as the name suggests, variables do not have 
a fixed value. Once data is stored in them, they can be 
updated to different values throughout the program. 









This also allows the code to work in a variety of 
different situations and for a lot of different inputs. The 
alternative to this is known as “hard-coding”, where 
each calculation and expression contains a specific 
value. This, however, would result in a situation where 
the programmer has to write multiple programs to 
cover every possible value that might be encountered. 





Assign a string 

In this example, a new variable, box_name, 
is declared and the value "Milk" is stored 
in it. The quotes around the word “milk” 
indicate that the value is a string. 


>>> box_name = "Milk" 


_ 


DIFFERENT 
PROGRAMMING 
LANGUAGES HAVE 
DIFFERENT WAYS OF 
CREATING 
VARIABLES 
INSIDE A 
PROGRAM 


Naming a variable 
Giving a suitable name to a variable, 
helps make a program easier to 
understand. Here are some rules 
that have to be followed when naming 
a variable: 
> Start the variable name with a letter 
+ Symbols such as -, /, #, or @ are 
not allowed 
- Uppercase and lowercase letters are 
different. Python will treat “Milk” and 
“milk” as two different variables 
- Avoid using Python commands, such 
as “print”, in the name 
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DECLARING VARIABLES a 


Creating a new variable is also called “declaring” it. In some 





programming languages, a special keyword is used to show that 
a new variable is being created. In Python, however, a variable 


is created as soon as a value is assigned to it. There is no need 
to state what sort of data will be stored in the variable. Python 
will work this out from the value being assigned to it. Using a 
variable without assigning a value to it is acommon error. 





Using variables 


Once a variable holds a value it can be used in various ways. 
The variable’s current value can be used in a calculation, or 
the value stored can be changed to a new value. 


Simple calculation 

This code carries out simple 
multiplication. It stores the 
integer 2 in variable input, 
then retrieves that value 
and multiplies it by 3. 

The result is stored in the 
variable score and then 
displayed on screen. 


Changing a value 

To change the value of a 
variable, a new value can 
be assigned to it. Typing 
this code into the shell 
window below the 
previously written code 
will have no effect on the 
value stored in score, it 
will only change the value 
of the variable input. 


Updating a value 

To get the correct result, 
the value of the variable 
score needs to be updated 
explicitly, as done in the 
example here. 


The output is 
updated 


>>> input 2 


>>> score = input * 3 
>>> print (score) 


6 





Prints the value 
assigned to score 


The result of 
the calculation 


Changes the value of input 


>>> input = 5 
>>> print (score) 


6 


The result will not change 


>>> input 5 


>>> score input * 3 
>>> print (score) 


15 





Adding this line assigns a 
new value to score after 
input has been changed 


Data in Python 


Python programs work with various data types. These 
types determine what can be done with different data 
items, and how they are input, output, and stored. Errors 
in Python code are often the result of forgetting to consider 
a value’s type and what it allows. 





PYTHON USES 








THE SAME 
RULES OF 
- asst ARITHMETIC 
ntegers an oats 
Numbers in Python programs can be one of AS HU MAN S TO CARRY 
two data types: integer or float. An integer OUT CALCU LATIONS 
is a Whole number with no decimal point, — 
while a float — short for floating point — has 7 3 tt of em ms 
a decimal point and numbers after it. Floats Sn rea 
are often used for measurements or as the 4 ithmetic Operators 
; umber 
result of a calculation. sa dition, subtree aoe numbers can be combined usi 
these 1 Ip ication, and divici SIN 
Bee ane Tene oo are called arithmetic nee The symbols for 
and contains the value 2 lj on Use familiar symbols, multiplicat s: While addition and 
slightly different and are shown as * af oe le 
; , 
>>> pets = 2? €spectively, 
ARITHMETIC OPERATORS 
>>> print (pets) Symbol 


2 Addition 


INTEGER 
© Subtraction 











>>> temperature = 37.5 Miniinttions 
ication 
>>> print (temperature) 
Division 
37.5 
This variable contai 
ains 
FLOAT ri Th . 
lieterebk Gor porn z . Price asa float in Ae will be stored 
contains a float eer ati € variable tax 
€ Pytnon > . 
commands >> price = 8.00 
USE arithmetic > 
Operators to *° BERRSUGRHESERonn: 
A calculate the tax aN 00) 
Owed On an item Print (tax) 
costing £ 8.00. 


i 6——_ The Output is the value 
Stored in the variable tax 





THE LEN() FUNCTION eee 


Characters and strings 

The data type Python uses for text is known as 
string. Made up of individual letters, numbers, 

or symbols called characters, strings must always 
have quotation marks at the beginning and the 

end. Python allows both single and double quotation 
marks in its code. 


Strings 

The variable forename 
contains a string made up 
of the characters of the 
word Alan. 


>>> forename = "Alan" 
>>> forename 


'Alan' 


Combining strings 

Combining two or more strings to make a new one is 
called concatenation. Python uses the + symbol to do 
this. It is important to change any values with different 
data types into strings before concatenating them. 


>>> happy = "happy birthday to you " 


>>> name = "Emma 


happy + happy + "happy \ 
birthday dear " + name + happy 


>>> song 


>>> song 
‘happy birthday to you happy 
birthday to you happy birthday 
dear Emma happy birthday to you' 





The variable song now 
contains a personalized 
version of “Happy Birthday” 


Casting 

It is sometimes necessary to change the data type of a value 
for a particular task, for example, when combining an integer 
and string. This is called casting, and Python provides 
functions, such as str(Q) and int), to allow it. 


Change integer 
to string 


>>> age = 25 
>>> print ("Your age is " + str (age)) 


Your age is 25 
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In a lot of programs it can be very useful 

to know the length of a string or a list. 
Python has a built in Len() function that 
can be used for both tasks. Remember that 
the length of a string will also count spaces 
and punctuation. 


>>> Len("Hello Alan") 
10 


Lists 

It is often useful to be able to group items 
together in a program. Python provides the list 
data type for this. A list can contain items that 
have the same data type or a variety of data 
types. To create a list, the values are enclosed in 
Square brackets and are separated by commas. 


The string "two" enclosed 
in double quotes 


>>> my_List = [1, "two", \ 
BeWSAe4i 
>>> my_List 


[1, 'two', 3, 5, 7.4] 








Single quotes do Backslash splits code 
not affect the value over two lines 


Accessing items 

To allow programmers to access items ina list, Python 
numbers each one. Typing the name of the list 
followed by the item number inside square brackets 
retrieves the relevant item. Python numbers the items 
in a list starting at 0. 


First item in the 
listmy_list 





>>> my_List[0] 
1 
>>> my_List[2] 
3 








Booleans, another data type in Python, 
have only two possible values: True or 
False. Booleans allow programmers to 
write branching statements that control 
which parts of a program are run. 


Logical operators 

Logical operators are symbols that allow a 
program to make comparisons between values. 
Any comparison that uses logical operators is 
called a Boolean expression and the result is a 
Boolean value. Logical operators are similar to 
arithmetic operators (see p.102), but produce 
Boolean values rather than numbers. 


LOGICAL OPERATORS 


Less than 
Greater than 
Equal value 


Not equal value 


Logical operators 
and branching 


It is important to distinguish 
between Python’s two different 
equals signs. A single equals “=" 
means that a value is being 


assigned to a variable. A double 
equals sign “==" is a logical 
comparison to see whether or 
not the values on either side 

of it are equal. 





Checks if the values on 
each side are equal 


Equality 

A Boolean expression containing a >>> 3 == 
double equals sign is True if the values 

on either side of it are equal. False 


Checks if the value 
on the left is smaller 


Less than 

An expression containing the < symbol 
is True if the value on the left is less 
than the value on the right. 


>>> EBRenoS 


True 


Stores the value 
5 in the variable 


5 





>>> oranges 





>>> apples = T oranges 
>>> oranges != apples Values in 
oranges and 
True apples are 
not equal 
Not equal 


Logical operators also work with variables. This 
example stores values in two variables then checks 
for the stored values being unequal. 





Boolean operators 
Boolean expressions can be combined 


>>> (oranges < 10) and (apples > 2) 


using the Boolean operators “and”, “or”, True For this to be True, both 
and “not”. They allow programmers to Sens ee 
build more complex expressions that can >>> (oranges < 10) or (apples == 3) 
deal with several different variables. True Only one expression has to be 
True for this statement to be True 
>>> not(appLles == 7) 
Putting “not” in frontofa 
True expression results in False 


the value False 
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This comparison is If the first condition is 
the first condition True this is printed 





More than 
twobranches quiz score = 9 
When there are more 


than two possible paths if quiz_score > 8: 
through the code, the 














elif command - short print ("You're a quiz champion!") This is the 
for else-if - is used. second 
Itis possibletohave elif quiz_score > 5: condition 
several elif branches a es F 
between the if branch : " ," If the secon 
pe raeanta nmi: print("Could do better!") pr eren 
else: True this line 
. is printed 


print("Were you actually awake?") 
















If both conditions 
are False this line 
is the output 





One branch 

The most straightforward branching command has 
only a single branch that the computer takes if the 

condition is True. This is called an if statement. Two branches 

A situation where a program should 

do one thing if a condition is True, and 
another if it is False needs a command with 
two branches. This is an if-else statement. 


temperature = 25 
This comparison 


if temperature > 20: ——— isthecondition 
print("Switch off heating") age = 15 

The comparison is 

if era) ey ieee the first condition 

If the condition is 


True the code runs print ("You can vote") 


If the condition is True, 


else: this line is printed 


print ("You are not old \ 


enough to vote") 








Branching 

Computer programs often contain 
code that should only be run in certain 
situations. To allow for this programmers 
create branches in the code. The decision 
about which branch to take depends 

on the result of a Boolean expression. 
This helps programmers tailor a 
program's behavior to different inputs 

or environments. 


A backslash is used to 
If the condition split a long line of code 
is False this over two lines without 

line is printed affecting the output 





User input 

To get user input from the keyboard, Python uses 
the input) function. This function normally takes a 
string as a parameter, which it displays to prompt 
the user to enter the required data. The function 
echoes the user’s input to the screen as a string, but 
does not save it. It therefore makes sense to assign 
the result of the input function to a variable so that 
it can be used later in the code. 





This string is displayed on screen 
asking the user for an input 


Output on screen 
The print function is used to display 
a value on the screen. It is a versatile 
Enter your name: Claire function that prints the value of any 
variable or expression, regardless of its 
data type. Programmers often use it to 
debug code if their editor does not include 

Bachata | a debugger (see pp.130-3 3). Printing 

bs nec neiced later The user's response is saved, out the value of variables at different 

Nee pee ee points in the code can be useful, but it 


to do something else 
| can also make the code untidy. 


>>> input("Enter your name: ") 


'Claire' 


>>> name = input("Enter your name: ") 

Enter your name: Claire 

>>> print("Hello " + name) @® @ ®@ 
Hello Claire 


The program prints the string “Hello” 
followed by the user’s name 


Input and 
output 


There is no point writing a program 
unless it produces an output that can 
be read and understood. In Python, 
programs often require some input, 
either from a user interacting with 
the program as it runs, or from a file. 
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Input from file = 
Python has the ability to input data directly from a file. 

This is especially useful in programs that require alotof J 
data, and where it would not be feasible to have a user 

type in the required information every time the program 

runs. In Python, opening a file creates a file object. This 

file object can be saved in a variable and used to carry 

out various operations on the file’s contents. 





Opens the file and saves the 
file object in the variable file 


>>> print("hello world!") >>> file = open("/Desktop/List.txt") 


heLLo world! 





>>> file.read ()——_. Reads the data from the file 
Prints a string 


‘High Street\nCastle Street\nBrown \ 





“\n” prints each 
output on anew line 


>>> file.closeQ)____ Closes the file 


>>> print (4) Street\n\n' 


4 Prints an integer 


Prints a float 
stored in a variable 


>>> metres = 4.3 


>>> file = open("/Desktop/List.txt") 
>>> file.readLine() 


"HG gh Street\n' Opens the file and reads 
one line at a time 





>>> print (metres) 


4.3 >>> file. readline ( 


‘Castle Street\n' 
>>> cats = ["Coco", "Hops"] 


>>> print (cats) Prints a list 





Output to file 

In Python, it is also possible to output data to a file. This is 
useful if a program produces a lot of data, or if it is updating 
or adding to an existing input file. When opening the file, the 
programmer must indicate that data will be added to it, and 
whether it should be written before or after existing data. 


['Coco', 'Hops'] 





The number of Opens the file for data to This means 
characters written be appended to the end “append” 
to the file | 


>>> file = open("/Desktop/List.txt", "a") 





>>> file.write("Queen Street") 


12 Writes the new value 
“Queen Street” to the file 


>>> file.closeQ 


O O O O O 





Loops in Python 


Programs often contain blocks of code that are repeated 
several times. Rather than typing the same lines over 
and over again, programmers use loops. The type of loop 
they choose depends on a number of factors. 


For loop execution is called an iteration. The body is always 


If a programmer knows the number of times a block of 
code will be repeated, a for loop is used. The code that 
gets repeated is called the body of the loop and each 


indented from the for statement and begins exactly 
four spaces from the start of the next line. Indentation 
can also be done manually. 


Loop variable 


This example loop counts from one to three, for counter in range(1,4): ee i 
printing each number on a new line, followed by ae —- 


a line saying “Go!”. The loop variable keeps track 
of loop iterations. It takes the value of each item 
in range(1,4) inaset order, starting with the 
first value for the first iteration. 


print (counter) 
print ("Go!") salesman This statement 


is the loop body 


red team = ["Sue", "Anna", "Emily", "Simar"] 


For loop with a list print("The Red Team members are:") 
To process a list using for loop there is no need to 
use the range () function. Python can simply set 
the value of the loop counter to each item in the list 
in turn. In this example, the loop prints out each 


name in the list red_ team. 


for player in red _team: 
eg es Se ee Se OAVET 1S the 


temporary loop counter 


print (pLayer) 


This question will appear, 
asking for user input 


While loops 

Another type of loop in Python 

is the while loop. It is used when 
a programmer does not know 
how many times a loop will run 
and cannot use a for loop. The 
number of iterations in this 

loop depends on user input. 


input ("Should I keep going? (y/n)") 


answer = 
while answer == "y": 


answer = input("Should I keep going? (y/n)") 
Loop condition 

A while loop includes a question called a loop 
condition, the answer to which is either True or 
False. The body of the loop is executed only if 
the loop condition on that iteration is True. If the 
loop condition is False, the while loop ends. 


The question 
is asked again 
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Infinite loops 
While loops are also used in situations where the loop 
is Supposed to run as long as the program is running. 
This is called an infinite loop and is commonly used 
in programs for games. To create an infinite loop, the 
user needs to set the loop condition to True. 


while True: 
print("There’s no stopping me now!") 


Getting stuck 

Unintentional infinite loops are 

the coding equivalent of a black 
hole. Program execution gets stuck, 
making the computer unresponsive. 


Prints the line repeatedly 


INDENT THE BODY 


Similar to a for loop, the body of a while loop 
is also indented four spaces from the while 
keyword. If this indentation is missing, Python 
produces an error message saying “expected 
an indented block”. 





Missing indentation 
produces this error 


number = 1 


2 expected an indented block 


while number < 10: 


print (number) 





Nested loops 
The body of a loop can contain another loop within itself. This loop 
inside a loop is called a nested loop. In Python, any type of loop can 
be contained inside any other type of loop — so a while loop can 
contain another while loop or a for loop, and vice versa. In this 
example, every time the body of the outer loop runs, the body of the 
nested loop is executed 10 times, printing out a countdown to launch. 


The Lo answer = input("Launch another spacerocket? (y/n)") 
nested 
loop | while answer == 


ape 
for count in range(10, 0, -1): This contains the 
list 10, 9, 8, 7, 6, 5, 4, 
print (count) 3, 2, 1, and counts 


down from 10 
print ("LIFT OFF!") 





answer = input("Launch another spacerocket? (y/n)") 


This line updates the variable answer The loop stops if 
during each iteration, making it possible to user input is n 
exit the loop when required 





Escaping loops sensor_readings = [3, 5, 4, -1, 6, 7] 
While coding, a programmer might want to 

exit a loop early, or may decide to abandon the 
current iteration of the loop body and move 

onto the next one. In such scenarios, there are 
two related commands, break and continue, for sensor_reading in sensor_readings: 
that can be used to escape the loop. 


total = 0 


if sensor reading < 0: Gives a total of all 
= sensor_readings up 


Break break until the negative reading 
The break command abandons the loop completely and . 

the code continues to execute from the instruction after the total = total + sensor_reading 

loop. In this example, the loop stops when a negative value : 

is encountered in the list sensor_readings. The code print("total is: " +str(total)) 


discards this negative value and any values following it. 
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Lists of lists list, which is ["Red Team", "Adam", "Anjali", 
Nested loops are often used when processing "Colin", "Anne"]. The loop variable name in the 
lists within lists. The example below prints the inner loop then takes the values in team one 

names of team members for three different after the other, until every name in the red team 
teams. When the code runs, the loop variable has been printed. Each team listing is separated 


team in the outer loop takes the value of the first by an empty line. 





teams = [["Red Team", "Adam", "Anjali", "Colin", "Anne"], \ 





["Blue Team", "Greg", "Sophie", "June", aSabagl i The list teams 
contains three 
["Green Team", "Chloe", "Hamid", niga "Jane"]] different lists 


enclosed within 
square brackets 


Selects a team 





for team in teams: 








to process 
for name in team: 
print (name) 
print ("\n") 
Prints an empty line Prints the names ina 
between each team listing team one after the other 






a a ys — riers — = SS aa ammo ee ee ee ee 


de "1 








readings = [3, 5, 4, -1, 6, 7] Initializes the variable 
total by setting 
total = 0 its value to O 


Triggers the continue 
command after reading 


for reading in readings: 
a negative value 


if reading < 0: 


. Continue 
continue The continue command is less drastic and only 
abandons the current iteration of a loop. The 
total = total + reading Gives a sum ofall Ign then skips to the next iteration. In this 
the non-negative — gyam ple, if a negative value is encountered, it is 
print("total is: " +str(total)) readings simply ignored and the loop jumps to the next 





value in the list. 


Functions 


Pieces of code that carry out a specific task are called functions. 
If the task is executed often, it is possible to separate it from the 
main code to avoid typing identical instructions multiple times. 

Breaking the code into sections this way also makes it easier to 

read and test the program. 





Using functions Defining a function . 
Using a function is also known as “calling” ee def greeting(: 
g ie g (see pp.114-15), it always has 
it. Most of the time, this is as simple as typing the keyword “def” and the print ("HeLlo!") 
the function’s name followed by a pair of uaa be a the start 
brackets. If the function takes a parameter Det oOneyenoen: 
it goes inside the brackets. A parameter is a The keyword def 
: : tells Python that 
variable Or value that 1s given to the function tints blackeok code The parameter 
to allow it to carry out its task. Sacre on SF ihetunckon 


POST OFFICE 





—_ an A METHOD |S A 
FUNCTION THAT 
=_ CONTAINS SOME 
| CODE TO CARRY 
OUT A TASK 








® E yy 
Y 7 
wa _ ro, 
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Built-in functions 

Python includes a range of built-in functions that enable the 
completion of basic tasks. These include getting input from 
the user, displaying output on screen, simple arithmetic, and 
determining the length of a string or list. The examples below 
can all be tried in IDLE’s shell window. 





Number to be rounded 


input () function’s parameter is a 





question that prompts the user for input >>> pi = 22/7 
>>> name = input("What is your name? ") >>> pi 
What is your name? Tina User inputs 3.142857142857143 
response 

>>> print ("Hello " + name) >>> round(pi, 2) 

Hello Tina 3.14 Decimal places 
input() and print() print() function’s round() 
The input () function gets data from the user, parameter is a string that This function rounds off a float to a specific 
and the print() function displays it as output is displayed on screen number of decimal places. It takes two 
on the screen. The parameter for input () is parameters - the number to be rounded, and 
displayed on screen to prompt the user. the number of decimal places to shorten it to. 


Calling another way 

Built-in functions, such as print() or lenQ), can be easily called because they 
accept parameters of various types. A method is a function associated with a 
particular object, and can only be used on that object (see pp.156—57). Calling 
a method is different from calling a built-in function. A method call has the 
object’s name, a dot, and the method name followed by a pair of brackets. 












Object name 





upper() method 

This method transformsall >>> City = "London" 

the lowercase letters ina 

string to uppercase letters. >>> city.upper (QUEEET [iqey cies: 
The upper () method can may take a 
only be used with strings. "LONDON' parameter 


Method name 








Adding to a list ; 
The list method append() >>> myLlist = [1,2,3,4] 
adds a value to the end of a 








list. thasone parameter- >>> myList.append (5) 

the value that needs to be 

appended to the list. >>> p rint (my L 1 st) The new value 
is added to the 






end of the list 








[e 25 35 4, 5] 


Creating functions 

Python has a Standard Library that contains a lot of ready-made 
functions. Most programs, however, include functions that have 
to be specifically made for them. In Python, creating a function 
is known as “defining” it. 


Defines a function that 


takes a temperature in This formula 
Celsius and prints it converts Celsius 
in Fahrenheit to Fahrenheit 


def print_temperature_in_ Fahrenheit (temperature _in Celsius): 


temperature_in Fahrenheit = temperature_in Celsius * 1.8 + 32 


print (temperature_in_Fahrenheit) 







Prints the 
temperature 
in Fahrenheit 


Top-down coding 

In Python, functions are normally defined at 
the top of the program, before the main code. 
This is because it is important to define a 
function before it is called, either by another 
function or by the main part of the code. 


def function a(): 


return 25 function_ais 
called from inside 


function_b 


def function bQ: 


answer = 2 * function _a(Q) 


A function that completes a task 

Some functions simply carry out a task without 
returning any information to the code that called 
them. This is similar to sending a letter by normal 
post. A postal worker delivers the letter and 
completes his task, but does not inform the 
sender that it has been delivered. 


NAMING FUNCTIONS 


Similar to the rules for naming variables, Python 
also has anumber of rules for naming functions. 
Just as it is important for a function to have a 
clear task or purpose, it is also important for the 
function to have a name that clearly describes 
what it does. So get_number () is not as good 


aname as get_number_of_winners() fora 
function that returns the value of the number of 
people who have won in a competition. If there 
are several words in a name, they should be 
typed in lowercase and separated by underscores. 





return answer This runs because both 
function_aand function_b Order of definition 
have already been defined Since the main part of the code calls 
both function_aand function_b, 
number = function_a() + function_b() they must be defined at the start of the 
program. As function_a relies on 
print (number) function_b, function_a must be 


defined before function_b. 


def count Letter e(word) :——— Defines a function that counts and 
— a returns the number of times the letter 








total e = 0 “e” appears in a particular word 
for Letter in word: This loop examines 
each letter in the word 
aha Vusba dala Kea Ee being investigated 


total _letter_e = total _letter_e+ 1 


return total _letter_e 
Asks users to enter their 


name, and then stores it in 
user_name = input("Enter your name: ") the variable user_name 








total_es_in_name = count_letter_e(user_name) 
print("There are " + str(total_es_ in_name) + "E's in your name") 


A function that returns a value 

There are also functions that carry out a task and 
produce a value, which is then returned to the code 
that called them. This enables the calling code to store 
the value in a variable, if necessary. 


Local and global variables visible to other people in that submarine. Global 
A global variable is declared in the main part of variables can be read by other functions in the 
the code and is visible everywhere. A local variable, code, but local variables cannot. The code will 
on the other hand, is declared inside a function and return an error message if a local variable is 

is only visible there. For example, global variables used outside of its function. A function must 

are like divers, visible to everyone under the sea, declare the global variable it intends to use 
including people in submarines. Local variables, or else Python will create a new local variable 
however, are like people in the submarines: only with the same name. 


def reset_game(): 


global score, charms, skills 


score = 0 

charms = 0 

skills = 0 
reset_game() Declares the global 
This function resets a game by variables that this 
setting the value of the global function will be using 


variables score, charms, and 
skills back to 0. 





Libraries 


A Python library is a collection of files, known as modules, 

that are available for other programmers to use. These modules 
contain code for common programming tasks, ranging from 
interacting with hardware to accessing web pages. 





Built-in modules 
The library that comes with every installation of 


Python is called the Python Standard Library. It turtle 
contains modules, such as Tkinter and turtle, y 4 Mii) ively uereltls etc es uit wUle se neheiste 


robot from the programming language Logo. 
which are available without the need to download The robot draws on the screen as it moves around. 


or install any additional code. 





random 

This module enables programs to 
include calculations or outputs based 
on random numbers. This can be useful 
when a programmer wants to create an 
element of chance. 












socket 
The socket module allows programs to communicate 
across networks and the Internet. This module allows 
programs to create their own sockets. 











datetime 

The datetime module allows a program to 
work with calendar dates and functions that «@ 
can calculate the time between dates. ; 


.7 


webbrowser 
The webbrowser module allows a Python 
program to open a browser on the user's 
computer and display links. 








The functions in this module deal with time, such as 
those relating to time measured by the computer's 
processor and time zones for different countries. 









Tkinter 
The Tkinter module allows programmers to create a 
graphical user interface (GUI) for their code, including 
elements such as buttons and menus. 
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Importing and using modules 

The process of adding a module to a program so that its functions and 
definitions can be used is called “importing”. In Python, it is possible 

to import either an entire module or just certain functions of a module. 
The method used for carrying out the import depends on the requirement 
of the program. The examples below illustrate the different methods 

for importing and the required syntax in each case. 





import... 

The keyword import followed by the import time 
module's name makes all of the module's 

code available to the program. To access 


the module's functions, it is necessary Calls the timezone function 
to type the imported module’s name offset = time. timezone —— ofthe time module 
followed by a dot before the function 

name in order to call that function. print ("Your offset in hours from \ 


Prints the value in 
UTC time is: ", offset) ——H the variable of fset 
2 9 


from... import... 
Ifa program only needs to useoneortwo from random i mport randint 





functions from a module it is considered The randint() 
better just to import these, and not the function produces a 
whole module. When functions are random integer 
imported in this way it is not necessary dice roll = randint(1,6) between 1 and 6 
to include the name of the module on 

before the function name. print("You threw a", dice roll) 


from... import... as... 

If the name of a function in the module from webbrowser import open as show_me 
is too long or is similar to other names 

in the code it can be useful to rename 

it. Just as in “from ... import ...”, this 


allows the programmer to refer to the wheal & input ("enter a URL: ") 
function simply by its new name, without Displays the user's 
preceding it with the name of the module. show me (url) choice of web page 





PYGAME eee 


The pygame library contains a huge number of useful 
modules for coding games. Since pygame is not part of 
the Standard Library, programmers have to download 
and install it before they can import it to their code. 


pygame is very powerful, but can be challenging for 
new programmers. One solution to this is the Pygame 
Zero tool (see pp.176-77), which makes the functions in 
pygame easier to use. 





Team allocator 


When playing team sports, the first thing you have to do is to pick 
the teams. One way of doing this is to choose team captains and let 
them choose the players for their teams. However, it might be fairer 
to pick people randomly. In this project, you'll automate this process 
by building a tool in Python that picks teams randomly. 


How it works Random allocation 
This project will use Python’s random module to form This project will pick two teams and a 


. captain for each team. When you run the 
teams, with randomly selected players. You will use program, it will display the chosen teams 


lists (See p.103) to store the player’s names. The random and captains on the screen. 
module will then shuffle this list into a different order. 
Loops will be used to iterate through the list and display 
the players. Finally, an if statement (see p.105) checks to 
see if the user is happy with the selection. 


Python 3.7.0 shell 


Welcome to Team Allocator! 
Team 1 captain: Rose 

Team 1: 

Jean 

Ada 

Sue 

Claire 


The list of players 
Martin is displayed in the 


shell window 
Harry 

Alice 

Craig 

Rose 


James 





> How to use the random module < Time: 
>» How to use lists 15-20 mins 


>» How to use loops Lines of code: 24 


>» How to use branching Difficulty level 
statements & 


Program design 

The program begins by shuffling the player list. 

It then allocates the first half as Team 1, randomly 
selects a captain, and displays the name of the 
captain along with the names of the rest of the 






ae 
EES 
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The code in this project can be reused for tasks 
that require random allocations. This includes staff 


shift scheduling, assigning tasks in the workplace, 

matching people to projects, selecting teams fora 
quiz, and many more. This can be a quick and fair 
way of allocating people to teams/tasks. 





team. The steps are then repeated for the 
second half of the list — forming Team 2. If you 
want to pick the teams again, the program 
repeats the steps, otherwise, the program ends. 





——) CREATE A TEAM 


ay Create a team 
This program will simplify the process of picking, 


or allocating, teams. In this section, you will create the 
file that will contain the code, import a module, and then 
make a list of players. 


(an) CREATE A NEW FILE ees) ADD THE MODULE 
The first step is to open IDLE. A shell window will appear. Now, import the random module. Type this line at 


lgnore it and click on File in the IDLE menu. Then, choose New the top of your file, so that you can use the module later. This 
File and save the file as “team_selector.py”. This will create an module contains functions that will allow you to pick players 
empty editor window where you can write your program. randomly from a list. 
New File I cick here 

Open... & O to create 

Open Module... a new file The random module can pick 

Recent Files > random numbers or shuffle a 

Module Browser a B list in a random order 


WELCOME THE USER N 
Dee cleaned MIS ebe 2 print ("Welcome to Team Allocator!") J 

welcome the user to the program. 

This will show a message to the user 

when the program executes. Save This phrase will appear as the welcome SAVE 

the file and then run the program message in the shell window 

to ensure your code works. From the 

Run menu, choose Run Module. If you 

have typed in the code successfully WeLcome to Team Allocator! 

the welcome message should appear 

in the shell window. >>> 
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RANDOM NUMBERS 


Random numbers can be used to simulate 
anything that can be random or is meant 
to be random. For example, rolling a dice, 





tossing a coin, or picking a card from a deck. 
Python's random module helps add an 
element of chance to a program. You can 
read more about how to use this module 

in the Docs section of IDLE’s Help menu. 








14 MAKE A NAME LIST 
You will need names for all the players to generate your 


teams randomly. In Python, you can keep groups of related items 
together in a list (see p.103). First, create the variable pLayers to 
store the list by typing this new block of code below the import 
statement. Put the list contents in square brackets, and separate 
each item in the list with a comma. 


import random 
The list is assigned to 





players = ["Martin", "Crai g", "Sue* , A the variable players 
"Claire" , Dave", "Alice" A You do not need to use a 
backslash (\) to split a list 
"Sonakshi", "Harry", "Jack", across two lines. Pressing 
return or Enter indents 
"Rose", "Lexi", "Maria", the next line ina list 
"Thomas" ; "James" ; "Willi am —_—_—_—_—_—____ Each item in the list 


is a string enclosed 


"Ada" ; "Grace" , "Jean" ; in quotation marks 


"Marissa", "ALlan"] 


This project has 20 players in the 
list. You can change the number 
of players if you like (see p. 127) 


(is) SHUFFLE THE PLAYERS 
There are a few ways in which the players can be randomly and assign the first half of the list to “Team 1” 





randomly selected. You could randomly keep picking players and the second half to “Team 2”. To do this, the first thing 
and assign them to the two teams until you run out of players. you have to do is to shuffle the players. Use the shuffle () 
This program assumes the number of players is even. However, function from the random module. Type this code below 
an even simpler way would be to just shuffle the list of players the print command. 


print("Welcome to Team Allocator!") 


random. shuffle (players) ———___ This will shuffle the list of 
players just like you would 


shuffle a deck of cards 


Pick teams 7 
Now that the list of players is SPLITTING LISTS eee 


ready, you can split the players into 

two teams. You will then assign 

the team captains. The teams 

and the names of their captains will 

be displayed on screen when the first index is inclusive (it is included in the new list) and the second index 

program is executed. is exclusive (it is included up to the item before it in the new list). If you are 
splitting the list from the first position up to the last position, then you can 
leave those indexes blank as Python will understand this. For example, 
players[:3] will take the first three players from the list and pLlayers[4:] 
will take the players from index 4 up to the end of the list. 





In Python, when splitting or taking subsets of a list you need to provide two 
arguments: the start index (position) and the index after the last item in the 
new list. Remember, indexes start from 0 in Python (see p.103). For example, 
players[1:3] would take the players from index 1 up to index 2. The 








SELECT THE FIRST TEAM 
You now need to split the list into two equal parts. code at the end of the file for welcoming the 
To do this, take the items in the list from positionO up tothe __user. This will create a new list with the first half 
last item in the list and divide it by two. Add the following of the players list. 
teaml = players[:len(pLayers) //2]2#77__ [Fis nee ist will be assigned 


to the variable team1 








SELECT TEAM 1 CAPTAIN 

Once you have allocated the first team, you need choice() function to pick a player randomly from team1. 
to choose the team captain. To make it a fair selection, Type this code at the end of the file. The captain is randomly 
this will also be done randomly. A player from team] will selected from the team] list using the choice() function 
be picked and assigned to be the team captain. Use the and appended to the string to be displayed. 


Prints the message 
stating who the 
team captain is 


ey DISPLAY TEAM 1 
After the captain is assigned, you need to display 


all the players from “Team 1” on screen. Remember you can 
use a for loop (see p.108) to iterate through a list. Type the 
following code at the end of the file. 





print("Team 1 captain: " + random.choice (teaml1) ) 


Prints a message to tell the user that the 
players for Team 1 are being displayed 


print ("Team 1:") 
for player in teaml: 


print (player) X 





This loop iterates Prints the current 
through team1 player's name SAVE 





TEST THE PROGRAM 

This is a good point to test your code. Run 
the code and look in the shell window to see the 
result. Does it display the players for Team 1? Does 
it display the number you expected? Is it randomly 
selecting a team captain that is actually part of 
Team 1? Run the code a few times to ensure it is 
random. If you have any errors, look back over 
your code carefully to spot any mistakes. 





Kemsoese MLE Me 


WeLcome to Team AlLlocator! 


Team 1 captain: Claire 





Team 1: 
Maria 
Jean 
William 
Alice 
Claire 
Jack 
Lexi 
Craig 
James 


Alan 


>>> 


SELECT THE SECOND TEAM . 
Assigns the second half of the 
Now you can allocate players for the 


second team by repeating steps 2.1-2.3. Type 
the following code at the end of the file. 


list to the variable team2. 
The players in this list will 
be part of the second team 


team2 = players[len(pLlayers)//2:] 


print("\nTeam 2 captain: " + random. choice (team2) ) 


print ("Team 2:") 
for player in team2: 


print (player) 





This loop iterates 
through team2 


“\n" prints 
the name 
of the team 
captain for 
Team 2 on 
a new line 


N 


v 


SAVE 


PICK TEAMS 


@@eeee020202020006000806808080 








TEST THE PROGRAM 

Run the code to test the program 
again. Ensure that it is working as expected 
for both teams. You should be able to see 


WeLcome to Team AlLlocator! 


in: j a th fth 
the list of players for both the teams along Team 1 captain: Marissa Be eae “ 
with the names of their captains. Tee i: displayed before 


the list of players 


Harry 
Claire 
Jack 
Sue 
Dave 
Craig 
Marissa 
Grace 
Alan 


Maria 


Team 2 captain: James 
Team 2: 
Martin 
Jean 
Alice 
Ada 
William 
Rose 
Lexi 
James 
Sonakshi 
Thomas 


Pa 2 





reamaliocatr LA4 / 125 


PICK NEW TEAMS 

You can now use a while loop to keep selecting teams 
until you are happy with them. Add a new line of code below the 
welcome message and remember to add indents for all the lines 
of code following this new line, as shown below. This will ensure 
that the existing code is part of the while loop. 








print("Welcome to Team Selector!") 


Bo eee SSSR S Se SS ESSE SES ESR S ESSERE EEEEESEEEREREEREEEEESS Adds the loop 
that allows 
random.shuffle(players) selecting the 
teams again 


teaml = players[:len(players) //2] 
print("Team 1 captain: "+random. choice (teaml1) ) 
print("Team 1:") 


for player in teaml: 





print (player) Add indents to 
these lines of 
team2 = players[:len(players)//2:] code to make 
them part of 
print("\n Team 2 captain: "+random.choice(team2) ) the loop 


print("Team 2:") 
for player in team: 


print (player) 


Bd REDRAW PLAYERS 
Finally, add the following code to 


ask users if they would like to pick teams 


again. Store the reply in a variable called Displays a message to ask 
response. If you choose to redraw the users if they would like 
players, the main loop will run again and to redraw the players 


display the new teams. 





response = input("Pick teams again? Type y or n: ") 


if response == "n": 





break 


Breaks out of the main a 
loop if the response is n ae 


SAVE 





PICK NEW TEAMS 


@eeeeeeeaoeaoeeaeaeeedeaeesgeoeeeed @ 





RUN THE CODE 





The program is now ready. Test the program again. 

You will see the list of both teams with the team captains, and a 
message at the end asking if you would like to redraw the players. 

Welcome to Team Allocator! 

Team 1 captain: Rose 

Team 1: 

Jean 

Ada 

James 

Claire 

Martin 

Harry 

Alice 

Craig 

Rose 


Sonakshi 


Team 2 captain: William 
Team 2: 
Jack 


Maria 





Sue 
RESHUFFLED TEAM 1 
Alan 
Dave 
Grace 
Marissa 
Lexi 
Thomas 


William 





Pick teams again? Type y or n: 
RESHUFFLED TEAM 2 


<) Hacks and tweaks 


Add more players 

The program has a list of 20 names. To add 
more players to the team selector, try adding 
some more names to the list. Keep the total 
number of players even, so that the teams 
have equal numbers of players on them. 


More teams 


Different sports have different numbers of players in their teams. 


The code in this project assumes that there will be two teams. 
However, if you have a longer list of players, you can even have 
three or more teams. Update the code in the program to ask 


while True: 


random.shuffle(players) 


teaml = players[:len(pLayers) //3] 


print ("Team 1 captain: 

print("Team 1:") 

for player in teaml: 
print (pLayer) 

team2 = 

print ("\nTeam 2 captain: 

print("Team 2:") 

for player in team: 


print (player) 


team3 = players[(len(pLayers) //3) *2:] 


print("\nTeam 3 captain: " + random. choice (teamz2) ) 


print ("Team 3:") 
for player in team3: 


print (player) 


" + random. choice (team1) ) 


players[Len(players)//3: (len(players) //3) *2] 


" + random. choice (team2) ) 
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the user for the number of players they want in each 
team. You can then split the number of players into the 
number of teams they can equally be split into. Ifa team 
is short of players, make sure to inform the user of this. 


Splits the 
number of 
players into 
three equal 
parts and 
assigns the 
first part of 
the players 
list to team! 





Assigns the 
second part 
of the 
players list 
to team2 


Assigns the 
third team 
with its 
own list of 
players and 
_ the team 
captain 





met HACKS AND TWEAKS 


Team or tournament 


Currently the program assumes that the code is fora sport. If you pick team, the code should run as you have 
team sport. If you want to create a program for individual already tested. However, if you pick “individual”, the code 
sports, change the code as shown below. This will ask the will split the players into random pairs to play against 
user if the players need to be split for an individual or team each other. 


print("Welcome to Team/Player Allocator!") 


while True: 


Displays a 
random.shuffle(players) message to ask 

the user if it is 
response = input("Is it a team or individual sport? \ a team or an 





individual sport 
\nType team or individual: ") 





if response == "team": Checks for the 
users response 


teaml = players[:Llen(players)//2] 


for player in team: 








print (player) Range will take the value 
0-19 and will increment by 
else: 2 each time. This is so we go 
through the list two players Prints the name 
for i in range(O, 20, 2): at a time to put them in pairs of players that 
will play against 
print(players[i] + " vs " + players[i+1]) each other 
Who starts? 
For both team and : : " u . 
rint(players[i] + " vs " + players[it+tl 
individual sports there P (play Lil BESD |! }) 
ever a ene Start = random.randrange(i, i+2) 


determine who will go 
first. Add this extra code 
to the program from the 
previous hack to do this 
for individual sports. 


print(players[start] + " starts") 
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Welcome to Team/Player Selector! 








Is it a team or individual sport? 





Type team or individual: individual 


James vs Harry 
The shell window 


James starts displays who starts 








Change to list of numbers 
The current program is only 
a good solution if you always 
play with the same people. 
However, if this is not the 
case, you can replace the 
player names with numbers 
to make it a more general 
solution. Remember to 
assign the numbers to the 
players before you use it. 


Number of players 
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import random 





players = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, | 
11, 12, 13, 14, 15, 16, 17, 18,}-— Update the 


code to 
19, 20] replace the 
names with 
numbers 





print("Welcome to Team Allocator!") 


Instead of having to change the size of the list each time you have more 
or fewer players, you can update the code to ask the user for the total 
number of players. This will create the number list, as well as create two 
equal teams. Update the program as shown here. 


import random 


players = [] 


print("Welcome to Team Allocator!") 


number_of_players 


are there? ")) 


int (input ("How many players \ 
Displays a message for 
the user to enter the 
number of players 


for i in range(1, number_of_ players + 1): 


players. append (i) 


teaml = players[:Llen(players)//2] 


print("Team 1 captain: " + str(random. choice (team) ) ) 


print("Team 1:") Updates code for team1 


team2 = players[Len(players)//2:] 


print("\nTeam 2 captain: " + str(random.choice(team2) ) ) 


print ("Team 2:") | Updates code for team2 


Debugging 


The process of finding and fixing errors in a program is called 
debugging. Also known as bugs, errors can range from simple 
mistakes in spellings to problems with the logic of the code. 
Python has various tools that highlight and help fix these errors. 


Syntax errors 

Syntax is the term used to describe the arrangement 
and spelling of words and symbols that make up 

the code. Syntax errors are the most common and 
easily fixed errors. They are equivalent to the sort 

of spelling and grammar mistakes that most word- 
processing programs highlight. IDLE displays syntax 
errors in code in a pop-up window. 


Indentation errors 

Indentation is a way of making a program more readable by 
using space to reflect its structure. The body of a function, 
loop, or conditional statement should be placed four spaces 
to the right of the line introducing it. Python makes 
indentation compulsory in the code. 


temperature = 25 


if temperature > 20: 


print("Weather is warm") 


o 


expected an indented block 





This line in the 
code should 
be indented 


This error 
message indicates 
an indentation 
error in the code 





Runtime errors 


These errors affect the fundamental features of a program. They can 
include accessing a nonexistent file, using an identifier that has not 


been defined, or performing an operation on incompatible types of 
values. Runtime errors cannot be found by checking a program's syntax. 
The Python interpreter discovers them while running the code and 


displays an error message called a “traceback” in the shell window. 


Type errors 

These errors occur when a function or operator is used 
with the wrong type of value. The “+” operator can either 
concatenate two strings, or add two numbers. It cannot, 
however, concatenate a string and a number, which is 


what causes the error in this example. 


>>> "temperature" + 5 


Traceback (most recent call last): 


File "<pyshell#3", Line 1, in <module> 


"temperature" + 5 


TypeError: can only concatenate str (not "int") to str 





pyshe LL refers to 
the shell window 





CHECK MODULE 


IDLE’'s “Check Module” command can be 
found in the Run menu. It checks a program 
file for syntax errors, allowing programmers Python Shell 


pebugsng LOO / 131 





Run Options Window 
Select this 
option from 


to identify and eliminate them before the lac le +) "| ‘he Runnent 


program is run. This tool does not display Run Module 


any message unless it finds an error. 


Name errors 

Misspelling the name of a variable or 
function can cause a name error. It can 
also be a result of using a variable before 
a value is assigned to it, or calling a 
function before it is defined. In this 
example, the typographical error is 

only found at run time, so the message 
is displayed in the shell window. 








Details of where and Location of the 
what the error is error in the file 


>>> pront ("Hello world") 





Traceback (most recent call last): 
File "<pyshell#0>", Line 1, in module> 
pront (" Hello world" )——___ The command that 


caused the error 
NameError: name 'pront' is not defined 


Logic errors 

Logic errors are usually the trickiest 
to spot. The program may run 
without crashing, but it produces 
an unexpected result. These errors 
can be caused by a number of 
issues, including the use of the 
wrong variable in an expression. 





Infinite results 

In this example an infinite loop prints Count = 1 The variable count 
the word “counting” indefinitely. is set to the value 1 
Since the value in the variable count 

is never updated, the loop condition 


will never be False. while count < 5: 





print ("counting") 


This statement will print ("finished") 
never be reached 





dil 


O a ® 


| ERROR MESSAGES 


Error messages 
While they are the most obvious 
tools to help programmers with 
debugging, Python's error messages 
tend to be slightly cryptic, and can 
appear to add to the mystery of 
debugging rather than clearing it 
up. This table lists some of the most 
common error messages along with 
their meaning. Programmers tend 
to become familiar with these errors 
and their solutions quickly. 

parsing 


Name [name of variable or 
function] is not defined 





EOL found while scanning 
string literal 


unsupported operand type(s) 
for +: ‘int’ and 'str' 


Expected an indented block 


Unexpected indent 


Unexpected EOF while 


ERROR MESSAGES 


Closing quotation mark missing 
for a string on that line 


The + operator expects the values on 
either side of it to be of the same type 


The body of a loop or conditional 
is not indented 


This line is indented too much 


Missing bracket just before 
the end of the program 


Usually caused by misspelling the name 
of the variable or function 


Text colouring 

Like most other IDEs (see pp.208—209) and dedicated 
code editing programs, IDLE colours the text of a 
Python program. This makes it easier to spot errors. 


For example, keywords such as “for”, “while”, and 


Wrong colour 

There are four errors in this example. 
The missing quotation marks and 
misspelling of the keyword “while” 
mean that the code will not be 
coloured correctly. 


The keyword 
“while” has been 
spelled incorrectly 


Misspelling of 
keyword and missing 
quote mark 





“if” are orange and strings are green (see p.98). A part 


of the code not appearing in the correct colour can be a 
sign that there is a syntax error. And several lines of code 
suddenly being coloured green is usually the sign of a 
missing closing quotation mark on a string. 


Missing a quotation 
mark at the start 


input (Pick a number") 


l= 7: 


answer = 
whle answer 


-pritn(Not the right number") 


input ("Pick a number") 


answer = 
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Debugger 
CHECK THE ERROR tind IDLE also contains a tool called a debugger. This allows 


— programmers to “step through” the execution of their 
A common issue when debugging is_ program, running one line at a time. It also shows the 
that the actual error may be located just , 

aa contents of variables at each step in the program. The 
before the place indicated by the error f ; 
message. It is therefore worth checking debugger can be started from the Shell window, which 
or on the line above it. menu will start the debugging process the next time 
a program is run. Choosing it again will turn it off. 








print(heLlo " + "world") 


Debug Options Window ———— Click the shell 
to produce the 
Produces an “Invalid Go to File/Line screen-top 
syntax” error due to Debugger Debug menu 
a missing quote Ls 


Stack Viewer 
Auto-open Stack Viewer 





Debugging checklist Moi ac m a 
When an error appears but its cause is not 

immediately clear, there are a few things 
that can be checked. This might not solve 
every problem, but many errors are caused 
by trivial mistakes that can be easily fixed. 


Here is a list of things to look out for: (Quit - a are 


Debug Control 


_annotations_ {} 

_builtins_ <module ‘builtins’ (built-in)> 
_doc_ None 

_file_ /Users/code/debug4.py' 


Everything is spelled correctly 


Upper- and lowercase letters are 
not used interchangeably 


Strings have a quotation mark 
at the beginning and end 


An opening bracket has a 
matching closing one 


The code has been saved since 
changes were last made 


No letters are confused with 


GES 


_loader_ <class '_frozen_improtlib.Builtinimporter'> 
_name_ ‘main _ 
_package_ None 
_spec_ None 
count 1 


numbers, e.g. O and 0, or | and 1 


There are no unnecessary spaces 
at the start of aline 


Variables and functions are 
declared before they are used 





Oo oc fo @ OU 


IDLE debugger 

When a program is run, the debugger will 
display information about it, including current 
values of variables. Clicking on the option “Step” 
will expose the code running behind the scenes, 
which is normally hidden from programmers. 








Project planner 


Time management tools can be very useful, both at home and 
at work. There are several applications that help in tracking 
the progress of daily chores and activities. This project will 
use Python's tuples, sets, and graphical modules to create a 
planner for developing a small gaming app. 


How it works 
This planner will create a schedule to help users plan their work. The 


program will display a window with a button that a user can press Gantt chart 


A Gantt chart is a type of bar chart that is 


to choose a project file. It will then read a list of tasks from the file used to illustrate the schedule of a project. 
and sort them in the order of their starting time, based on certain The tasks to be performed are listed on the 
prerequisites. The resulting data will be converted into a chart that y axis and the time periods are listed on 

oe the x axis. Horizontal bars on the graph 
will display when each task starts and ends. display the duration of each activity. 


Weekly distribution 
of tasks 


Project Planner 
Open project... 


The width of this bar gives 
the duration of an activity | Week 1 Week 2 | Week 4 Week 5 








Design game functionality 





Draw basic images 


Break functionality into steps 


Implement basic functionality En 








Test and review 


Draw better images 

















=) 
Implement advanced aa 


functionality 





Test and review 


Release onto app store 























> How to extract data from a file Time: 
1.5 hours 


>» How to use Python sets 


» How to use namedtuples Lines of code: 76 
» How to create asimple Tk Ul app | Difficulty level 
» How to draw using Tk Canvas eee 





Program design 

This project uses one continuous loop to 
check if users have pressed the Open 
project... button. If they have, the program 
opens a CSV file to read and order its 
contents before they are displayed as a 
chart. The chart will display the amount 
of work to be done in the allotted time. 


CSV file 
The tasks in this project are stored as a file of 
comma-separated values, known as a CSV file. 
Using this file is a common way of representing 
tabular data, as it can be read and modified by 
spreadsheet applications. 
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Reading data from files and processing it is common 
to almost all programs, even the ones that do not 
use documents in an obvious manner: for example, 
games. The basic tasks of opening windows, laying 
out buttons, and drawing custom elements are the 
building blocks of any desktop application. 

















NO 


——) CREATING AND READING THE CSV FILE 


Creating and reading the CSV file 
To draw the planner in your app, you 

need to create a CSV file that lists all the tasks 
that have to be completed. Then, you will write 

the code in a Python file to read the CSV file. 


oaZ, 












TASKS CSV FILE 





CREATE A NEW FILE 
The first step is to create a new file for the Python 


code. Create a folder called “ProjectPlanner” on your 


computer. Then, open IDLE and select New File from the NewFile #N QR Select this option 








File menu. Choose Save As from the same menu and save Open... # O to create a new file 
the file as “planner.py” inside the ProjectPlanner folder. Open Module... 

Recent Files > 

Module Browser do B 


CREATE A CSV FILE 

Python has a library called csv that makes it easy to read . Tyne this line in the 
and write CSV files. Now add a line of code at the top of your Python iBeeEeeseE ey file 
file to read the new CSV file. However, before you can read a CSV file, 
you will need to create one. This can be done with a spreadsheet 
application, but since a CSV file is a simple text file you can create it 
in IDLE. Select New File from the File menu, choose Save As and save 


the file in the ProjectPlanner folder. Name this file “project.csv”. You IN IN 

may get a warning message when you do this, as “csv” is nota ————— — 

standard Python extension, but you should use it anyway. ——S—S—— ——_—_—. 
—_——__——_—EEEE ea SSS 
PLANNER.PY PROJECT.CSV 


You have used the extension “.csv” at the end 


e f of the name. The standard extension is “.py”. VL a 


You can choose to use the standard extension instead. 


Sues 


continue using 


the .csv extension 
WARNING MESSAGE 





ies Mie AON AD 














WRITE A SIMPLE PROJECT 
Now you can write a simple plan for a project to develop line of text in the file will represent one row of the table and 
a small gaming app. Type the following lines into the CSV file each element in the row will represent one column value. 
with a list of tasks to be completed to create the gaming app. There For example, the second row has four column values. Save 
should be no blank lines at the beginning or end of the file. Each and close the file once you have typed in the tasks correctly. =e 
The first column The second column The third column value 
value represents the value gives a title to gives the number of days 
task number the task the task is expected to take 
The values in each 
ae mele column are separated 
1,Design game functionaLity,2, by commas 





2,Draw basic images,1,1 
Each line represents 
3,Break functionality into steps,2,1 one row of the table 





4,ImplLement basic functionality,5,2 3 
aaa The fourth column value 


5 p Test and review ; 2 : 4 gives the prerequisites of 
the task as task numbers 
6,Draw better images,3,5 with spaces in between 


7,Implement advanced functionality,7,5 





8,Test and review,4,6 7 This row is task 8 with the title Test 
and review. It is expected to finish 
9,Release onto app store, 1 ,8 in 4 days and requires tasks 6 and 7 


to be completed before it can start 


PYTHON TUPLE eee 


A tuple is a data structure like a list, but its length 

cannot be changed after it has been created and the >>> numbers = (1, 2, 3, 4, 5) 
items inside it cannot be updated. Lists are mostly | ! 
used to store a sequence of values of the same kind, >>> print (numbers [3]) 
such as a list of numbers representing the height of 
a group of people. Tuples, on the other hand, are 
used when the values are related, but of different 
kinds, such as one person's name, age, and height. The value at index Index numbers are enclosed 

position 3 in the tuple within square brackets 





numbers is 
a tuple with 
five values 





>>> numbers[0O] = 4 Try changing the value at 
index position 0 in the tuple 





Traceback (most recent call last): 


Returns an error since 
the values inside a tuple 
cannot be updated 


File "<pyshell>", Line 1, in <module> 


numbers[0O] = 


TypeError: 'tuple' object does not support item assignment 








fi) READ DATA FROM THE FILE 
The functionality in Python’s csv library makes it easy column) as the key (see p.160). This will allow you to look up 





to read data from the CSV file. Once the data is read, the values a particular task quickly by its number. Now, add this code to 
are stored in a Python tuple. The tuple is then stored into a your .py file after the import statement from step 1.2. It will 
“dictionary” (a data structure, where each item has two parts - a open the CSV file, read the rows of data from it, and place 
key and a value), using the task number (the value from the first the results into a dictionary. 
def read tasks(filename): The name of the file is given as 
= the argument to this function 
tasks = { eras enaiifa Sets tasks to an 
empty dictionary 
noe eG one nneeeeneeaoeneenentenlenaveniaeenenee —— ovens the file for reaaing, uses a 


reader object from the csv library 
to interpret the file as CSV data, 
and then iterates over each row 
with a for loop 


number = row[0] 
title = row[1] 


duration = row[2] 
Extracts the four values 


prerequisites = row[3] from the row. The row 
; ; is indexed by a column 
tasks[number] = (title, duration, \ number (counting from 0) 


— to obtain a particular value 
prerequisites) 








return tasks ii 
The function returns the The values are stored as a tuple in the 
complete dictionary tasks dictionary by task number SAVE 
15) TEST THE CODE 
Now test the code to make sure you have typed in the The function will return a dictionary containing the information 
instructions correctly. Choose Run Module from the Run menu from the file. However, all of the values will be read as Python 
and switch to the shell window. Type the code below to call the strings as the csv.reader object does not know how to interpret 
function with the name of the CSV file you created in step 1.2. the data that it is reading from a file. 
Type this line Reads the data 
at the prompt in this CSV file 


>>> read _tasks("project.csv") 
{'l': ('Design game functionality', '2', ''), '2': (C'Draw 
es CN mb ers are also 
basic images', '1', '1'), '3': ('Break functionality into fea@ a> Styne: 
steps', '2', '1'), '4': (C'Implement basic functionality', 
'5', '2 3'), '5': C'Test and review’, '2', '4'), '6': ('Draw 
better images', '3', '5'), '7': (C'Implement advanced 
functionality’, '7', '5'), '8': ('Test and review', '‘'4', 


'6 7'), '9': C'Release onto app store', '1', '8')} 


Mu ON Mie 








CONVERT TO OTHER DATA TYPES 
The “task number” and “task duration” values are numbers number will always be an integer (whole) number, but the 
in the CSV file. Since these are currently read as strings, it will be task duration will be a float (decimal) value as it can take a 
better if they can be converted into Python number values instead. non-whole number (like 2.5) of days to finish a task. Save 
Update the read_tasks() function as shown below. The task the file and then run the module again to test this. =e 





def read_tasks (filename) : 
tasks = {} 


for row in csv.reader (open(filename) ) : 





number = int(Crow[0]) Converts the task 
number from a string 

title = row[]1] into an integer number 

duration = float (row[2] )—2@-—-—__L___ Converts the task X 
duration from a string into JL 


prerequisites = row [3] a floating point number 
SAVE 


>>> read_tasks("project.csv") 


{1: ('Design game functionality', 2.0, ''), 2: ('Draw basic 
ap as Task numbers 


images', 1.0, '1'), 3: ('Break functionality into steps', 2.0, | aereadas 
integer values 








'1'), 4: C'Implement basic functionality’, 5.0, '2 3'), 5: 
('Test and review', 2.0, '4'), 6: ('Draw better images', 3.0, 


= Task duration 
'5'), 7: C'Implement advanced functionality’, 7.0, '5'), 8: shies 
a tloating 


(‘Test and review', 4.0, '6 7'), 9: ('Release onto app store', _ pointvalue 


ay GiOoyn 


Converting data types 

In Python's csv library, it is the standard 
behaviour of the csv.reader object to read 
every value as a string. You need to specify which 
values are “numbers” manually to ensure they 
are read as integers or floating point numbers. 


iN N 








CREATING AND READING THE CSV FILE 


@ee @ peeeeoeesoeoeoeeoeaeoeeaeeaeseoea@eeeeseds 0 


@eeeeeeoedeoeede0800 


@eee 


PYTHON SETS eee 


A Python set is another data type that is similar to a 
list, but it can only contain unique values. This makes 
it similar to the keys of a dictionary. The syntax for 
writing a set is similar to that of a dictionary. A set 
can be assigned to a variable in several ways. Try 
these examples in the shell window. 


Just like a dictionary, 
Python sets are also written 
inside curly brackets 


—_ 


>>> numbers 


Defining a set 

The variable numbers is defined as a set containing the numbers 
1,2, and 3. You should never write an empty set as “numbers = {}”, 
as Python will read it as an empty dictionary. To avoid this, create 
an empty set by calling the set () constructor function. 


Removes the value 


>>> numbers 
“3” from the set 


>>> numbers 


Removing values from a set 
Similarly, you can also remove items { Tees 4} 


from a set using the remove method. 


Adds the number 
“4” to the set 


>>> numbers.add (4) 


>>> 


{1, 


>>> 


numbers 
2, 3, 4} 
numbers.add (3) 


>>> 


{1, 


numbers The number “3” is already 
in the set, so the value 


2, 3, 4} inside it does not change 


Adding values to a set 

You can add values to a set with the add method. 
Since a set only contains unique values, adding a 
value that is already in the set will do nothing. 


. remove (3) 





(7 PREREQUISITES AS SETS OF NUMBERS 
So far, you have converted the task number and task SET() 


duration into integers, but the prerequisites are still a string (“1” 

or “2 3”). To read the prerequisites as a collection of task numbers, 
first split the string into individual values using Python’s built-in 
spLit method. Then use the int() and map() functions, as 
shown here, to turn the string values into a set. 


Items separated by spaces will 


>>> value = "2 3"______ be split into separate values 
The split method takes 
one string and turns it 


into a list of strings 


>>> value.split ( 


Dies 228) 





map () calls the int() function 
on every string in the list 





>>> set (map 


{2, 3} 


(int, vaLue.split()) 


int() converts a string 
value into an integer 





Converts the values returned by 
map () into a (set) data structure 





Combining functions 

This illustration demonstrates how to combine simple 
functions to create complex logic. It starts with the original 
string value and splits it into string parts. The int () function 
is then called on each of these parts using the map () 
function. set() turns the result into a Python set. 
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MAKE THE PREREQUISITE CHANGES 

Now incorporate the code from the previous step Converts the prerequisite 
into the read_tasks() function as shown below. Run the values from strings into 
module again and switch to the shell window to test it. sets of integers 





Import csv 
def read tasks (filename) : 
tasks = {} 
for row in csv.reader (open (filename) ): 
number = int (row[0]) 
title = row[1] 
duration = float (row[2]) 





prerequisites = set(map(int, row[3].split())) 
tasks[number] = (title, duration, prerequisites) (im 


return tasks 
SAVE 


>>> read_tasks("project.csv") 

{1: ('Design game functionality', 2.0, set()), 
2: ('Draw basic images', 1.0, {1}), 3: ('Break 
functionality into steps', 2.0, {1}), 4: 
('ImpLement basic functionality', 5.0, {2, 3}), 
5: ('Test and review', 2.0, {4}), 6: (‘Draw ae rerio 


better images', 3.0, {5}), 7: (C'Implement the correct data type 


advanced functionality', 7.0, {5}), 8: ('Test 





and review', 4.0, {6, 7}), 9: ('Release onto app 
store', 1.0, {8})} 











y base 


TEST 








19° TEST THE PROGRAM 
The data is now ready and you can try to pull out some specific 


bits to test it. Run the module again and switch to the shell window. Then 
type the lines of code shown below. This time you will store the resulting 
dictionary in a temporary variable so that it can be manipulated. 


Assigns the data toa 
>>> tasks = read tasks ("project.csv" ) ——-—-—————____ temporary variable tasks 


Pulls out the data for a specific 
task by indexing tasks with 
the task number 


>>> tasks[3] 


(‘Break functionality into steps', 2.0, {1}) ————— DPatais returned asa tuple 
l on ae | of three values with specific 


index positions 








Title is at index Duration is at index Prerequisites are 
position 0 position 1 at index position 2 


Extracts the duration of this task by 
>>> tasks[3] [1] ————__— indexing again with the value 1 





2.0 Returns the value (duration) at index 
position [1] in task number [3] 





USE NAMED TUPLES 

Getting task values by their index positions is not named tuples that will allow you to extract the values 
an ideal way to extract them. It will be better if they can be within them by name instead of position. Add this 
referred to by a proper name, such as “title” or “duration”. code at the top of your file to create a named tuple 
Python provides a standard way of doing this. You can create type and store it in a variable. 


import csv 
Imports the namedtupLe() function 


from collections import namedtuple from the collections module 





Task = namedtuple("Task", ["title", "duration", "prerequisites"]) 





def read_tasks (filename) : 


Defines a named The value names 
tuple called Task are given as a list 
of strings 





PREREQUISITES 





NAMED TUPLE 





DURATION TITLE 


CALL THE NAMED TUPLE TYPE 

The named tuple type created in the previous step is stored in the 
variable Task. You can create new values of this type by calling Task like a 
function. Update the read_task() function in your code to call Task instead 
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of creating a tuple in the normal way. Then, run the module and switch to the shell The named tuple 
window to test the code. First, you will display the values in the shell (output 1), Task is stored in 
and then you will try to extract one of these values by using its name (output 2). the tasks dictionary 


def read_tasks(filename) : 


tasks = {} 


for row in csv.reader (open(filename) ) : 


number = int(row[0]) 
title = row[1] 
duration = float (row[2]) 


prerequisites 


tasks [number ] 


return tasks 


set(map(int, row[3].split()) 





Task(title, duration, prerequisites) Y 


SAVE 


>>> tasks = read_tasks("project.csv") 


>>> tasks[3] 


Names are displayed 
in the shell for each 


Task (titLe="Break functionality into steps", duration=2.0, of the values in the 


prerequisites={1}) 


>>> tasks[1].title 


named tuple 


OUTPUT 1 


Extracts the title of 





task[1] by name 


"Design game functionality" 


>>> tasks[3].duration 


2.0 


Extracts the 





duration of 
task[3] by name 


>>> tasks[4].prerequisites 


{2, 3} 





Extracts the 
prerequisites of 
task[4] by name 


OUTPUT 2 


| ORDERING THE TASKS 


Ordering the tasks 
Now that the tasks have 
been read in and converted into a 
useful format, you need to consider 
how to order them and determine 
when each task can begin after the 
project starts. You will do this by 
creating a function that computes 
the starting point of a task based 
on the status of its prerequisites. 





NO 


iL” 





Flowchart for task ordering logic 

A task cannot start until its prerequisite 
tasks have been completed. The 
program repeatedly loops over all the 
tasks that are still to be completed, picks 
an incomplete one, and then calculates 
when this task can start by computing 
the starting points and durations of 
each of its prerequisite tasks. 





i] 
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IMPLEMENT THE LOGIC 

You can now implement the logic for ordering the a start day, expressed as a number of days from 
tasks. Add the following function at the end of the file. This the start of the entire project. So the first task(s) 
will return a dictionary that will map each task number to will begin at 0 days. 





return tasks 


def order_tasks (tasks): 





incomplete =6éE (tasks) | Starts with all the Gets the task and checks 
tasks incomplete if its prerequisites have 
compl eted = set() | __ and no start days been completed 
start_days = {} Loops over the 
7 incomplete task 
while incomplete: numbers while there 
P are still any left couauinits 
: , earliest this 
for task_number in incomplete: Balak 
= based on the 
task = tasks[task_number] AA lua 








prerequisites 





if task.prerequisites.issubset (completed): | 
earliest start _day = 0 
for prereq_number in task.prerequisites: 
prereq end day = start _days[prereq number] + \ 
tasks[prereq number] .duration 
if prereq_end_ day > earliest_start_day: 


earliest start _day = prereq end day 





Breaks out of the start_days[task_number] = earliest_start_day| 
for loop. The loop a = an _ 
Sear incomplete. remove (task_number) Bei euk 
there are still some a start date and 
incomplete tasks left completed add (task number) remembers that 
= ~ this task has 
break been completed 


Returns the 
return start _days—— computed dictionary 


ISSUBSET SET METHOD eee 


The issubset set method checks whether one set is completed yet. The earliest_start_day is 
contained within another set. An empty set is a subset set to 0 before looping over a task’s prerequisites. 


of any set, including another empty set. This means If there are no prerequisites, then this task will 
that task.prerequisites.issubset (completed) use 0 as its start day. Once this task is added to 
will be true for a task with no prerequisites and will the completed set, it will allow the tasks that 
begin immediately, even when no tasks have been depend on it to begin. 





— ORDERING THE TASKS 


f2i2) TEST THE CODE 
Save the code and run the module to test the order_tasks() 


function at the prompt. You will see that task 1 can begin immediately 

(after 0 days) and task 9 is the last task to start, 22 days after the project 

begins. Tasks 2 and 3 will both start at the same time, as will tasks 6 and 7. These tasks start at the same 
It is assumed that the user will be able to do both tasks at the same time. time because they have the 
same prerequisites 





>>> tasks = read_tasks("project.csv") 
>>> order_tasks (tasks) 

| 2 0 cS 0: A 
82 18.0579: 22270) 








Drawing the chart 

Now that you have read the CSV file and 
ordered the tasks inside it, it is time to draw 

a Chart for the project. Python has a built-in, 
cross-platform toolkit for graphical applications 
called Tk. You will use this to open a window 
and draw inside it. 














IMPORT THE TOOLKIT 





Start by importing the Tk functionality into 
your program. It is found in Python's standard library 
called tkinter - short for Tk Interface. Add this code 
at the top of the .py file. By convention, the import 
statements are ordered alphabetically at the top of 
the file, but it does not matter if they are arranged 

in a different order. 


import csv 


import tkinter 


Imports the Tk 
functionality 
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THE Tk GUI 


Visual elements in TK are called “widgets”. The root List widget packed on 
Widgets are placed inside one another to create a window widget top of root window 
hierarchy of graphical elements. The “root” (first) 
widget created in this hierarchy is the top-level 
window widget. Widgets are created by calling 
their Tk constructors with the parent widget as 
the first argument, followed by a set of keyword 
arguments specifying different attributes of the 
widget, such as its size and colour. Widgets 

are visually packed within their parent widgets. 
Tk module’s mainlLoop() function draws the 
widgets on screen and handles events such as 
mouse clicks and key presses. This function does ——SY Me. 
not return while the window is open. If you want 
to do anything after the window opens, you will a ee ga PCE 
have to define functions that will be called by 

mainloop() when specific events happen, such 

as a button being pressed. Button widget Button widget Frame container widget 


packed at the left packed at the packed at the bottom of 
side of frame right side of frame the root window 





e0@e My Application 











(ee) CREATE A WINDOW 
Next, add this code at the end of the .py file to create a 


window. It will contain a button and a canvas widget. The button Creates a button 
will display some text as a label, and the canvas widget will define widget and places 
an area that you can draw into. You need to specify the size and Creates a Tk top-level window it at the top edge 
background colour of the canvas widget. widget (see box, above) of the window 


return start _days 
root = tkinter.Tk( | 
Gives the 
root.title("Project Planner") ————— window aititle 


open_button = tkinter.Button(root, text="Open project...", \ 











command=open_project) HW Creates 

a Canvas 
open_button. pack (side="top") i widget and 
places it at 
Canvas = tkinter.Canvas(root, width=800, \ the bottom 
edge of the 

height=400, bg="white") window 

Ccanvas.pack (side="bottom") 

tkinter.mainLoop( IN 


Runs the Tk main 
event-handling function SAVE 





3.3 RUN THE CODE 
If you run the code at this point, you will see a 


blank white window with no button inside it. You will also 
get an error message in the shell window. This is because 

the open_project() function has not been defined as 
yet. You will need to close this window to continue. 


====== RESTART: /Users/tina/ProjectPLlanner/planner.py ====== 
Traceback (most recent call Last): 
File "/Users/tina/ProjectPlanner/pLanner.py", Line 35, in <module> 
open_button = tkinter.Button(root, text="Open project...", 
command=open_project) 
NameError: name 'open_project' is not defined 


>>> 


The program will crash and display 
this error in the shell window 


34 ACTIVATE THE BUTTON 
The button you created in step 3.2 should allow you to open_project() function just below the order_tasks() 


select a .csv project file that will then be drawn into a chart. To do function from step 2.1. If you run the program now you will get 
this, use a Tk file dialogue found in a sub-module of tkinter. Add the another error message as the draw_chart() function has 
import statement at the top of your file as shown. Then add a new not been defined yet. 


import tkinter Imports a single function from 
tkinter.filedialog rather 


from tkinter.filedialog import askopenfilename Ea OrEI DE ne epee oaule 


“an 


Calls the function to opena Specifies the .” isa special directory name for 
file dialogue for choosing a CSV file dialogue title the “current” directory 


oR Se) ee Se eee ele de 
return start days 


def open _project(): 








filename = askopenfilename(titlLe="Open Project", initialdir=".", \ 
filetypes=[ ("CSV Document", "*.csv")]) 
tasks = read_ tasks (filename) 


draw_chart(tasks, canvas) 








Draws a chart of the tasks Reads the tasks from the .csv Specifies the 
in the canvas widget file returned by the dialogue acceptable file format 
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DRAW THE CHART 

It is time to draw the project as a Gantt chart. function and gives default values to some of its 
Before drawing the chart, you will first need to decide what arguments. Only the first two arguments (tasks and 
you want it to look like and what visual elements you need canvas) are actually required to call the function. The 
to draw it. Add this code below the code from step 2.1 (above arguments with default values are optional and will 
the open_project() function) to draw the headers and take the values that you have specified, creating some 
dividers of the chart. This will define a draw_chart( local “constants” in the function. 

Task title Header divider 


ie a ane 
the week number 


Task start/ 
TASK 3 Sarr duration bar 








Column 
divider 





Arguments with default values specify Default value of 
where to draw the elements and how an argument 
much space they will take on the canvas 


‘def draw _chart(tasks, canvas, row height=40, title width=300, \ 
Line_height=40, day _width=20, bar_height=20, \ 








title_indent=20, font_size=-16): Draws a horizontal 

~ line for the header, 

height = canvas["height"] one row down and 
Defines the height and width across the entire 

width = canvas["width"] of the canvas as local variables width of the chart 


week width = 5 * day width 


canvas.create Line(O, row height, width, line height, \. 





fill="grey") 
Loops through the number 
of weeks from 0 to 4 


Sets x to the width of the title 
plus the week width times the 
number of the week 





for week number in range(5): 
x = title width + week number * week _width——— 
|canvas.create_Line(x, 0, x, height, fill="grey") 


Canvas.create text(x + week width / 2, row_height / 2, \ 





Draws a vertical line text=f"Week {week number+1}", \ 
at x down the entire 
height of the chart font=("Helvetica", font_size, "bold")) 
def open _project(): 
Draws a text string at a point half a week 





width past x and half a row down 


—' DRAWING THE CHART 





RUN THE CODE 

Your Gantt chart is now ready. 
Save the file and run the code. You will 
now be able to click on the button, 
choose a CSV file, and see the headers 
and dividers being drawn. 


Week 4 Week 5 




















Height Title width 
































THE Tk CANVAS WIDGET 


The Canvas widget provides a space on screen inside 

which you can add elements, such as lines, rectangles, 

and text. You need to call methods on the canvas 

object to create the elements. These methods take 

one or more coordinates as arguments, followed by 

a number of optional keyword arguments that allow 

the user to specify styling information, such as colours, 

line thicknesses, or fonts (see tables, below). Canvas 

coordinates are specified in pixels from the top-left 

corner of the drawing area. Colours can be specified 

either by their names, such as “red” or “yellow”, or by 

their hex code, such as “#FFOO00”. Text is drawn centred ———————— 
on the given coordinates by default. The anchor CANVAS[“WIDTH”] 
keyword argument can be set to a “compass point” 

constant (tkinter.N, tkinter.NE and tkinter.E) to draw 

the text with a corner or edge at the coordinates instead. 


[, .LH9DISH,,|SVANVD 


BASIC METHODS ADDITIONAL STYLING ARGUMENTS 


create_line(x1, y1, x2, y2, ...) Adds a line from (x1, y1) width Line width 
to (x2, y2) 


Fill colour of a shape or the 
create_rectangle(x1, y1, x2, y2, ...) Adds a rectangle from colour of lines and text 
(x1, y1) to (x2, y2) 


outline Outline colour of shapes 


create_oval(x1, y1, x2, y2, ...) Adds an oval witha 
bounding box from 
(x1, y1) to (x2, y2) Font used for text, either a tuple of 
(name, size) or (name, size, style) 


create_text(x1, y1, text=t, ...) Adds a text label anchored 
at (x1, y1) showing string t anchor Anchor point of the text used when 
drawing at the specified coordinates 





appa OON On 


DRAWING THE TASKS 





Finally, add this code to draw the task title and the task 


duration bar for each task. Type these lines at the end of the Draws the task title anchored at the 
draw_chart() function. Then, save the file and run the code to centre-left of the text, half a row below 
see the complete Gantt chart when you open the “project.csv’ file. y and title_indent in from the left 


...Canvas.create text(x + week width / 2, row_height / 2, \ 
text=f"Week {week number+1}", \ 


font=("Helvetica", font_size, "bold")) 


Orders the tasks to 
start _days = order_tasks(tasks)  _——SSs=7zeet the start days 
y = row_height——— Beginswith y, one row down Loops over the task numbers 
from the top of the canvas in the order that they occur in 
for task_number in start_days:——___ the start_days dictionary 


task = tasks[task_ number] 


canvas.create text(titLe indent, y + row_height / 2, \ 





text=task.title, anchor=tkinter.W, \ 





font=("Helvetica", font _size)) 


bar_x = title width + start _days[task number] \ 
* day width 
Calculates 
bar_y = y + (row_height - bar_height) / 2 the eourdinates 
z =. = of the top-left 
bar_width = task.duration * day width corny eee 
—_ = and its width 
canvas.create rectangle(bar_ x, bar_y, bar_x + \ 
bar_width, bar_y + \ 
bar_ height, fill="red") 
y += row_height 
Adds a vertical space of row_height Draws a red-coloured 
into the original y bar using these values 
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©) Hacks and tweaks 


Stop the window from resizing 
At the moment the user can manually resize the window of the Gantt chart. 


However, this causes the contents to move around or be cut off. Drawing the Prevents the root 
window properly when it is resized is quite complicated, but you can stop it from window from resizing 
being resized instead. Add this line of code to the program to make this change. in any direction 


root.title("Project Planner") 
root.resizable(width=False, height=False) 
open button = tkinter.Button(root, text="Open project...", \ 
command=open_project) 
You will not be able to 
resize the window anymore 


, al 
Project Planner 
Open project... 


Week 1 Week 2 Week 3 Week 4 


Design game functionality 


ae 
Draw basic images i 
Ea 


Break functionality into steps 
Implement basic functionality 
Test and review 

Draw better images 


Implement advanced 
functionality 


Test and review 
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Use a frame to layout the button 

You can use a Tk Frame widget to change the position of the 
Open Project... button. Currently it is stuck in the middle of the 
window at the top. You can place it in the top-left corner and add 
a bit of space around it. Add the following lines of code at the 
bottom of the .py file to create the button_frame and then 
update the open_button so it sits inside this widget. 


root = tkinter.Tk( 
root.title("Project Planner") 


root.resizable(width=False, height=False) 





fickesome LOL# LOO 





Creates a frame at the root 
of the window, with a small 
amount of x and y padding 


button frame = tkinter.Frame(root, padx=5, pady=5) Places the frame at the 


top of the window, filling 
the entire width of x 





button_frame.pack(side="top", fill="x") 


open_button = tkinter.Button(button_ frame, text="Open project...", \ 


command=open_project) 





open_button. pack (side="Left") 


Places the button at 
the left of the frame 


canvas = tkinter.Canvas(root, width=800, height=400, bg="white") 


Creates the open_ button inside the 
button_frame instead of the root 





Mp HACKS AND TWEAKS 


Add a filename label 

You can also place a label inside the window with the name of the file that 
you are looking at. Add the following lines to the code as shown. The config 
method used in the code will allow you to reconfigure a widget after it has 
been created. It takes the same named keyword as the original widget- 
creation function. This will allow you to specify the text attribute of the 
Label widget after you have opened the file. 


def open_project(): 


filename = askopenfilename(titLe="Open Project", initialdir=' 


ies \ 


filetypes=[("CSV Document","*.csv")]) 


tasks = read_tasks (filename) 


draw_chart(tasks, canvas) 





filename_lLabel.config(text=filename) Updates the text 
me attribute of the label 
root = tkinter.Tk( with the name of the file 


root.title("Project Planner") 
root.resizable(width=False, height=False) 

button frame = tkinter.Frame(root, padx=5, pady=5) 
button frame.pack(side=”"top”, fill=”x”) 


open_button = tkinter.Button(button frame, text="Open project...’ 


command=open_project) 


open_button.pack (side="Left") 


Creates a new label 


filename Label = tkinter.Label (button_frame) —— inside button_frame 
: : me 0 i wy «~iRPlacces the label to the 
filename_lLabel.pack (side="right") sldotelsluluta 


canvas = tkinter.Canvas(root, width=800, height=400, bg="white") 


Project Planner 











Open project... Desktop/ProjectPlanner/project.csv 


Week 3 Week 4 





Design game functionality 


Draw basic images 


(aah 


The name of the 
file will appear 
to the right of the 
Open project... 
button 


project planet LO4 / 106 


Add aclear button 





You can also add another button to your program that will Updates the text 
clear all the items from the window and erase the chart. attribute of the label 
Add the following lines to the code to create it. to an empty string 


draw_chart(tasks, canvas) 
filename_label.config(text=fi Lename) 
def clear_canvas(): 


filename_label.config(text="") 
Creates a new button inside 


canvas.deLlete(tkinter.ALL) — Deletes all the the window that will call the 
existing items on clear_canvas() function 
root = tkinter.Tk() the drawing canvas when pressed 


root.title("Project Planner") 

open_button = tkinter.Button(root, text="Open project...", \ 
command=open_project) 

open_button. pack (side="Left") 

clear_button = tkinter.Button(button_frame, text="Clear", \ 


command=clear_canvas) 





clear_button. pack (side="left") eee 
button on the left 
filename label = tkinter.Label (button frame) ‘'4¢°fthe window 
canvas = tkinter.Canvas(root, width=800, height=400, bg="white") 


canvas.pack (side="bottom") 


Open project... 





Objects and classes 


One of Python’s most important features is that it is 

an object-oriented language (see p.25). This means that 
data in Python can be arranged in terms of classes and 
objects, which allows users to have one blueprint from 

which multiple objects can be created. 






SELECT 


Class 

Programmers use classes to classify related 
things together. This is done using the 
keyword “class”, which is a grouping of 
object-oriented constructs. Here, the class 
Car defines the form the objects below 
should have. 


BICYCLE 
Object 
An object is an instance of a class, just like 
a real car is an instance of the concept of a 
car. A car object's fields and methods would 
contain data and code for a particular instance 
of the class Car. So the object named “sports” 
would have a higher “max_speed” than the 
“sedan” object. SEDAN SPORTS 


Fields current_speed 
Fields contain data about an object. 

In this example, fields are likely 

to include values that might feature max_speed 


in a car simulator program, such [i 








as current_speed, max_speed, and 


fuel level. 
- fuel_level 





Objects Reb chat 1 6 / it b/ 


What are objects and classes? 

An object is a data type that is modelled after a real-world item, such 

as acar, allowing programmers to create a computer representation 

of it. Objects usually consists of two parts: fields, containing data, and 
methods, containing code. A class, on the other hand, defines the form a 
particular object should have. It is like the “idea” of an object and lays out 
the types of field that object would have, and what its methods would do. 





Describes the 
attributes common Fields of the 
to any car class Car 





class Car: 


current_speed = 0| 








max speed = 0 


fuel_level = 0 





def accelerate (self): 
print ("speeding up") 
def break(self): 


print("slowing down") 





Methods of 
my car = Car() the class Car 


my car.current_speed = 4.5 
my car.max_ speed = 8.5 


my car.fuel_ level = 4.5 


Methods 


Methods define an 
object’s behaviour, so 

a car object's methods 
would be likely to include 
actions that could be 
done to, or with, a car. 
For example, accelerate, 
brake, and turn. 


Sets the fields of the my_car 
object to specific values 


Instantiating a class 

, A program that allows users to model the functioning 
Turn | of a car might include the class Car, with attributes 
common to all cars. A user’s car (here, a sports model) 
would then be an object, with fields containing values 
related to that particular car, and methods defining 
the actions done with the car. 








Budget manager 


Managing money can be a tedious task, which can be made 
easier with a computer. There are various apps for tracking 
what you spend, based on setting budgets for different 
kinds of expenses. This project will create a simple budget 
manager using Python dictionaries and classes. 


What the program does Budget planner 


This budget manager will allow users to keep track of their expenditure Rather than directly creating a program, 
this project will create a set of functions 


against an overall budget of 2500. To start, a budget is allocated for that can be called from the Python 
different kinds of expenditure, such as groceries and household bills. shell. These functions can also be 
The expenses can then be compared against their allocated budget. imported and used in other programs. 


A summary is displayed to get a quick overview of the finances. 


Python 3.7.0 Shell 


>>> add_budget ("Groceries", 500) 





2000.00 

Allocates spend 
>>> add budget ("Rent", 900) against budget 
1100.00 


>>> spend("Groceries", 35) Returns the 
465.00 _——————_$_$_$?—$——$$_?$?$$?$$?$$$$_—_$_$<<— SS SSS SSS uit et 
>>> spend("Groceries", 15) 


450.00 


uit 


>>> print_summary () 





Budget Budgeted Spent Remaining 
Groceries 500.00 50.00 450.00 
Rent 900.00 0.00 900.00 
Total 1400.00 50.00 1350.00 


The summary gives 
an overview of all 
the expenses 








Pidgetmanager LOO # LOO 


>» How to use Python dictionaries Time: 
1 hour 


> How to raise exceptions for errors 


» How to format strings for output | Lines of code: 43 


» How to create a Python class Difficulty level 


The library developed in this project, with the 
addition of a user interface, can be used ina 
simple financial-planning application. Splitting up a 
program into multiple modules and encapsulating 
code and data in classes are both techniques that 
are used extensively in programming. 





Function calls 

The functions written in this program will allow you 

to allocate an amount of income to different named 
budgets. The functions will then track spending against 
these budgets to see the total amount spent compared 
to the amount that was budgeted. The diagram below 
shows an example of making a series of function calls. 


LIBRARY BUDGET 
USER LIBRARY 
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Program design 

In this project, functions are added 
sequentially to create the budget library. 
Then, asummary of all the expenses is 
printed. In the end, all the code is converted 
into a Python class to make it more useful. 








— SETTING UP 


Setting up 

To create this budget manager, you will need a new 
Python file. You can then add some basic code to the file and 
build on it later. The use of Python dictionaries will allow you 
to save the amount budgeted and spent. 





CREATE A NEW FILE 
The first step is to create a new file that will a» 
contain the code for this project. Open IDLE and select 
New File from the File menu. Create a new folder on your 
desktop called BudgetManager, and save this empty file 


























inside it. Name the file “budget.py”. 
BUDGET.PY 
SET UP THE VARIABLES 
Now create some global variables that will . a Sets the variable 
track the amount of money available, the amount available 2500.00 available to 
you have budgeted, and the amount spent. You = yi an example 
will use Python dictionaries (see box, below) for budgets = {} starting amount 


the budgets and expenditure that will map from a di - 
name, such as “Groceries”, to an amount of money. expenditure = { } sl 
Type this code into the new file. 





Curly brackets are used to 
create a dictionary - an empty 
dictionary in this instance 


DICTIONARIES 


When deciding what Python data structure to use, another, such as an amount of money. In the table 
think about how you would write the information to be below, the first column contains the keys of the 
stored. Often, the obvious way to write something down dictionary and the second contains the values. If 

is similar to the table shown below. If the information in the table has multiple value columns, then these 
the first column is unique (the items in it are not repeated), can be stored in separate dictionaries using the 
then using Python dictionaries might be the answer. same keys. You can, therefore, have one dictionary 
A dictionary is a data structure that consists of multiple for budgets and another for expenditure. 

key:value pairs. It maps one value, such as a name, to 


DICTIONARY FORMAT 


Budgetname -===Budgetamount 


Groceries 500 


Bills 200 
Entertainment 50 


{"Groceries": 500, "Bills": 200, "Entertainment": 50} The table information 
above as a Python 


dictionary 








eweace POOP MOA 


Adding a budget 

In this section, you will create budgets for 
the various expenses. First, you will add code to 
enable the user to add these budgets, and then 
ensure that the code prevents users from making 
some common budgeting errors. 











ADD A BUDGET FUNCTION ; 
available 


Write a function to adda 5 
budget. The function will take the def add_budget (name, amount): will be global 








name of the budget and the amount wpemeet 
of money to be budgeted. It will then global avai Lable—_____________ this function 
store these in the budgets dictionary = Stores the 
and deduct the amount from the budgets [name] = amount budgeted 
amount available. The function then : = amount in 
returns the new available amount available -= amount the budgets 
to show how much is still left to as dictionary 
budget. Add this code below the expenditure[name] = 0 
global variables. : 
return available X 
Deducts the budgeted v 
amount from the Returns the new Sets the spent amount 
available amount available amount for this budget to 0 SAVE 
RUN FILE 
Save and then run the file >>> add budget ("Groceries" , 500) Type this line 
by selecting Run Module from the = and press Enter 
Run menu. This will open the IDLE 2000.0 RetnaednalueGk 
Python shell window. You can test : thefuncticnicall 


the function by typing an example 
call in the shell. You will see >>> in the 
window, which is the Python shell 


/>>> budgets 


prompt. You can type small pieces {'Groceries': 500} 
of Python code next to this and they 7 
will be executed when you press >>> expenditure 


Enter or return. 





‘{'Groceries': 0} 


Typing the name of 
variables at the prompt 
will show their values 


— ADDING A BUDGET 


(2a) ERROR CHECKING 
To see what happens if you add a budget twice, 


type this code in the shell window. You will notice that the 
budgets dictionary will be updated with the new value, but 
the available amount is reduced by both. To avoid this, you 
need to add some code to check if the same budget name has 
been used twice. Add the code shown in the editor window 
below to make changes to the add_budget() function. Rent 


Groceries 


>>> add budget ("Rent", 900) Clothes 


1100.0 


>>> add_budget("Rent", 400) 


700.0 The available amount 
is deducted twice 





>>> budgets 


{'Groceries': 500, 'Rent': 400} 





def add budget (name, amount): 


Checks if name already 
exists as a key in the 
budgets dictionary 


global available 


if name in budgets: 


Leaves the function immediately 


raise ValueError ("Budget exists") mike 
with an exception if a budget 


budgets[name] = amount 


name appears more than once 


EXCEPTIONS eee 


In Python, errors are indicated by raising exceptions. 
These exceptions interrupt the normal execution of 
code. Unless the exception is caught, the program 
will immediately exit and display the exception that 
has been raised and the line of code it occurred at. 


TYPES OF EXCEPTIONS 


There are a number of standard exception types in 
Python. Each of these accept a string value giving an error 
message that can be displayed to the user to explain what 
has gone wrong. The table below lists a few standard 
exception types and when they should be used. 


A value is not of the expected type: for example, using a string where 
a number was expected 


TypeError 


ValueError 


RuntimeError 


A value is invalid in some way: for example, too large or too small 


Some other unexpected error has occurred in the program 





tases OL MO 


RUN THE MODULE 

Test the code again to " : " 
check if the error has now been gee add_budget ("Groceries", 500) 
fixed. When you run the code, 2000.0 





the three global variables will 
be set back to their initial 
values. Type this code in the 
shell window. You will now 


>>> add budget ("Rent", 900) 


get an error message if you 1100.0 

try adding the same budget . 2 

twice. If you check the variables >>> add_budget("Rent", 400) 

budgets and available, you 2 

will see that they have not been Traceback (most recent call last): 


updated with the wrong values. 
File "<pyshell>", Line 1, in <module> 


add _ budget ("Rent", 400) 
Error message 
displayed on screen File "budget.py", line 7, in add budget 





raise ValueError ("Budget exists") 





_VaLueError: Budget exists 


[>>> budgets 
. . {'Groceries': 500, 'Rent': 900} 
The variables will 


not be updated >>> available 
with wrong values 
| 1100.0 





(25) MORE ERROR CHECKING 
Continue in the shell window to see what happens if Update the code in the editor window. Then save 


you budget an amount of money that is more than what is available. _ the file and run the code once again to test if the 
This is clearly an error, since you should not be able to over-budget. new error message is displayed, and over-budgeting 
Add another check into the add_ budget() function to fix this. is prevented. 


>>> add budget ("Clothes", 2000) 


-900.0 A negative value 
indicates over-budgeting 





if name in budgets: 


raise ValueError ("Budget exists") Checks if the amount being 
budgeted is more than the 
we bebietetebel Ee] ehh ede] ee EEE Ee 1 ee 
raise VaLueError ("Insufficient funds")——————— ®a'sesan By 
exception and Lb 
| the functi 
budgets[name] = amount Sakis sie ame 


immediately 
SAVE 





>>> add_budget ("Groceries", 500) 
2000.0 
>>> add budget ("Rent", 900) 
1100.0 
>>> add budget ("Clothes", 2000) 
Traceback (most recent call last): 
File "<pyshell>", Line 1, in <module> 


add_ budget ("Clothes", 2000) 





Error message for 


File "budget.py", Line 9, in add budget over-budgeting 
is displayed 


raise ValueError ("Insufficient funds") 





VaLueError: Insufficient funds 





Tracking expenditure 

Next, you need to add a way to track 
all the expenditure. To do this, you will first 
add a function that allows you to enter 
the money that has been spent, 


and then add another function to > Ny 
display the summary. This will 

indicate the total money spent 

and the amount remaining. 


ADD SPEND FUNCTION 
Add a function to note the 





RENT "CLOTHES Ei 
GROCERIES MM MONEYLEFT @&@ 





i Raises an exception if the value 
amount you have spent and the name of return available apie bata 
the budget that you want to track it against. pane 
Adda ea eoend () function below fie def spend(name, amount): sia madte pede epee 
add_budget() function. The Python : : : ; 

“+=" operator is used to add an amount to if name not in expenditure: 
a variable. Save the file and then run the ; 7 ‘ 
module to try using this new function. raise ValueError("No such budget") 
Adds amount to the corresponding key —__—__—_expendi ture[name] += amount 


in the expenditure dictionary 
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RETURNING THE REMAINING AMOUNT 


It will also be useful to track the amount left in " : " 
>>> 
the budget. Add this code to the end of the spend () function add_budget ("Groceries", 500) 
you just created, then save and run the file to test the code. 2000.0 





You will notice that you can spend more than the budgeted 
amount. You do not need an exception for this, as you will 


want to track overspending. >>> spend("Groceries", 35) 





Gets the budgeted 
| amount for name 465 
budgeted = budgets [name] >>> spend("Groceries", 15) 
spent = expenditure[name] 450 
return budgeted - spent >>> spend("Groceries", 500) 
See ase eee 256 eee value nae Hee 
left in the budget amount spent Silene este ears 
PRINT ASUMMARY 
In this step, you will add a function that will display an code at the bottom of the file. Then, save the changes 


overview of each budget name, the amount originally budgeted, and run the file in the shell window. The summary will 
the amount spent, and the amount left to spend (if any). Add this display the figures for every category. 


def print _summary(): 
Loops through all the keys 


for name in budgets - sin tthe budgets dictionary 
Gets the budgeted amount 

budgeted = budgets [name ]—2—-———____ for the name key 

Gets the amount spent 
spent = expenditure [name] ——————_ fr the name key 

Calculates the remaining amount 
remaining = budgeted - spent by deducting budgeted from spent 
print(name, budgeted, spent, remaining) ——————— Printsasingle line 


summary for this budget 


>>> add_budget ("Groceries", 500) 
2000.0 

>>> add_ budget ("Rent", 900) 
1100.0 

>>> spend("Groceries", 35) 
465 

>>> spend("Groceries", 15) 
450 

>>> print_summary () 
Groceries 500 50 450 

Rent 900 0 900 





Groceries 500 50 450 
Rent 900 0 900 





— TRACKING EXPENDITURE 


(2a) FORMAT THE SUMMARY 
At this stage, the summary will be a bit hard to the print_summary() function as shown below. 


read with the numbers squeezed together. To fix this, This will create a string from the values, formatting 
you can line them up in a proper table by using “string each to a specific width and number of decimal 
formatting” (see box, below). Change the print linein places. It will then print that string. 





remaining = budgeted - spent 
print (f'{name:15s} {budgeted:10.2f} {spent:10.2f} ' 
f' {remaining:10.2f}') 


The amount will be displayed 
with two decimal places 


>>> add_budget ("Groceries", 500) 
2000 

>>> add_ budget ("Rent", 900) 

1100 

>>> spend("Groceries", 35) 

465 


>>> spend("Groceries", 15) 


450 
>>> print _summary QO The values will have two 
aa _ decimal places and will 
Groceries 500.00 50.00 450.00 | _ belined up in columns, 
|___ similar to a table 
Rent 900.00 0.00 900.00 





FORMAT STRINGS ee@ 


In Python, formatted strings can be created from values EXAMPLES OF FORMAT STRINGS 

with special format strings. These are written like normal Example = —i—i‘—~—~*séSRestt 
strings, but have an “f” character before the opening 

quotation mark. Inside the string, you can place code f'{greeting} World!’ ‘Hello World!’ 


expressions within curly brackets. These will be executed 
‘Hello 


and replaced with their values. The most common fgreeting:10s} 
expressions used are variable names, but arithmetic 
calculations can also be used. Any part of the string outside 
the brackets is used without change. Detailed formatting F{cost:5.1f} 35) 
instructions can be added after a colon. This includes 

a letter specifying how to format the value. Placing a f' The answer is {a * bY Bee ere) 
number before this letter allows a width to be specified. 


f'{cost:5.2f}' aA, 





Khe sees OOP MOY 


ADD A TABLE HEADER 

Now, add a header to the 
table so that the numbers within each 
category can be easily distinguished. 
Add two print statements in the 
print_summary() function. It may 
be easier to type the line with dashes 
first - 15 dashes followed by three lots 
of 10 dashes, with spaces in between. 
You can then line up the titles against 
the dashes. 














500.00 50.00 450.00 
















0.00 900.00 





def print_summary(): 
print ("Budget Budgeted Spent Remaining") 
print ("--------------- ----------\---------- ---------- ") 


for name in budgets: 





The titles have been aligned 
budgeted = budgets [name] against the dashes 


spent = expenditure[name] 





ADD A TABLE FOOTER 

To complete the summary table, you can add a footer for printing the totals that you used for the budget. 
to it. This will add up the contents of the various columns and However, remember to use “Total” instead of the budget 
display their total value. Update the print_summary () name, and total_ budgeted, total_ spent, and 
function as shown below. Use the same format instructions total_remaining for the other variables. 


def print _summary(): 
print ("Budget Budgeted Spent Remaining") 
print ("--------------- ---------- ---------- ---------- ") 
total budgeted = 0 
a lt 


total remaining = 0 


for name in budgets: 








total budgeted += budgeted 


total spent += spent Adds the amount 
to the totals 








total_remaining += remaining | 
al elelaiete lalla els ieletsiel leistetristetsteleleltcisistiletcialn ia) be miaine (ele iat ) 
print (f'{"Total":15s} {total budgeted:10.2f} {total _spent:10.2f} ' 
f'{total budgeted - total spent:10.2f}') 





Prints another 
separator line 


>>> add budget ("Groceries", 500) and the summary 
with the totals 

2000.0 below it 

>>> add budget("Rent", 900) 

1100.0 


>>> spend("Groceries", 35) 
465 
>>> spend("Groceries", 15) 
450 


>>> print_summary () 





Budget Budgeted Spent Remaining | 
Groceries 500.00 50.00 450.00 
foo «Final Summary 
Rent 900.00 0.00 900.00 table printed with 
a header and footer 
Total 1400.00 50.00 1350.00 | 





In this section, you will take all the 
code written so far and turn it into 
a Python class (see pp.156—57). 
This will allow the user to track 
multiple budgets simultaneously. OC 
1  ° 
$) 


So. a | 


MAE OOM ON 
Converting the SSS 
code into a class 
SS 
4 ~ 














INDENT THE CODE 

Since Python is structured using Format Run Options Click here to 
indentation, you need to indent the entire add indents to 
code to convert it into a class. Select all _IndentRegion == - the entire file 
the code in the file and then choose “Indent Dedent Region 
Region” from the Format menu. Next, add Comment Out Region 


a new class header at the top of the file, 
before the variables. 


Definesthe _____class BudgetManager: 
new class p 
available = 2500 


The variables will now budgets = {} 
appear indented 








| expenditure = {} 





ADD INITIALIZER 

Indent the three variables again and add a function values for the instance variables. The first argument of the 
header to them. Functions inside a class are known as methods. initializer is the new instance, called self by convention. 
The __init__ method is called when a new instance of a class You can also add additional arguments that will allow you 
is created. This method is called the “initializer” as it sets the initial to provide useful values, such as amount here. 


class BudgetManager: 


—— eee ECE Agents 


def init__(self, amount): within the 


initializer 
available = 2500 





budgets = {} 


expenditure = {} 


=, CONVERTING THE CODE INTO A CLASS 





CREATE INSTANCE VARIABLES 


Next, convert the three variables into instance : 
variables. This is done by adding “self.” before each of class BudgetManager: 


the variable names. Use the argument amount instead of def 
2500 as the initial value for the available instance variable. 


__init__ (self, amount): 


self.available = amount 





Converts the self.budgets = {} 
variables to 
instance variables self. expendi ture = { } 


TURN THE FUNCTIONS INTO METHODS 








Now you need to turn all the other functions in the code into 


methods. Just like with the initializer, you can do this by adding self as the 
first argument of every function, and then adding self. before each use of 
the instance variables. Modify the add_budget() function as shown below. 
Delete the gLobal available line from the add_ budget method, as 


Remove the line 
global available 
from between these 


available is now an instance variable. 


two lines of code 


def add budget(seLlf, name, amount): 


def 


if name in self.budgets: 

raise ValueError ("Budget exists") 
if amount > self.available: 

raise ValueError ("Insufficient funds") 
seLlf.budgets[name] = amount 
self.available -= amount 
seLf.expenditure[name] = 0 
return self.available 
spend(seLf, name, amount): 
if name not in self.expenditure: 

raise ValueError("No such budget") 
seLf.expenditure[name] += amount 
budgeted = seLlf.budgets[name] 
spent = self.expenditure[name] 


return budgeted - spent 
Adds an argument 





def print_summary (self): to the function 


GebiCn G UU YOY 


print ("Budget Budgeted Spent Remaining") 





oD af Mk Ai ated chapel at epalatata steele a)als|nie| etstst rial aveintelstetebsetaleieletiie(sp=iciebeias ") 

total budgeted = 0 

total spent = 0 

total remaining = 0 

for name in self.budgets: 
budgeted = self.budgets[name] 


spent = self.expenditure[name] 





Add self. before Lb 
each use of the wy 
instance variable 
SAVE 


45— RUN THE MODULE 
Save and run the module. Type these lines in the shell window to 


test the code. This will add a newly created instance of the BudgetManager 

class. The code inspects the instance variables by putting outgoings. Sets the variable outgoings 
before their name. You can call methods in a similar way, by putting the to an instance of the 
variable name before the function name with a full stop. BudgetManager class 


>>> outgoings = —E 


>>> outgoings.available 
2000 
>>> outgoings. budgets 


{} 


>>> outgoings.expenditure 

{} 

>>> outgoings.add_budget("Rent", 700) 

1300 

>>> outgoings.add_budget ("Groceries", 400) 
900 





>>> outgoings. 


600 


>>> outgoings. 


500 


>>> outgoings. 


{'Rent': 700, 


>>> outgoings. 


365 


>>> outgoings. 


Budget 


Rent 
Groceries 


Bills 


Entertainment 


Es] TRACKING MULTIPLE BUDGETS 
It is possible to reset the budget by simply creating a budget called holiday. As the available, budgets, and 


new instance of the BudgetManager class, by typing this code in 
the shell window. You can even have multiple BudgetManager 
instances for tracking separate budgets. To test this, create a new 


add budget ("Bills", 300) 


budgets 
"Groceries': 


spend("Groceries", 35) 


print _summary () 


Budgeted 


700.00 
400.00 
300.00 
100.00 


1500.00 


Creates a new instance of 
the BudgetManager class 


>>> outgoings 


>>> outgoings.add budget ("Groceries", 500) 


2000 


>>> SUE ESMTEEROEUBENSHOTEEUEEOEN 


BudgetManager (2500) 


300, 


add budget ("Entertainment", 100) 


Remaining 


700.00 
365.00 
300.00 
100.00 


1465.00 


expenditure variables are stored within each instance, 
they are distinct from each other and can have different 
values for the different instances. 


Prints the summary 
for the new instance 


"Entertainment': 





PYTHON 


Opie G UKE BU fe 


Budget Budgeted Spent Remaining 

Groceries 500.00 0.00 500.00 

Total 500.00 0.00 500.00 

>>> holiday = BudgetManager (1000) Adds another 
new instance of 

>>> holiday.add budget ("Flights", 250) BudgetManager 

750 

>>> holiday.add budget ("HoteL", 300) 

450 

>>> holiday.spend("Flights", 240) 

10 

>>> holiday.print_summary () 

Budget Budgeted Spent Remaining 

Flights 250.00 240.00 10.00 

Hotel 300.00 0.00 300.00 

Total 550.00 240.00 310.00 





(si USING THE CODE 
The code written in this project is a module that can new file and save it in the BudgetManager folder you 





be used in other programs. This module can be imported and 
used like any other Python library (see pp.116-17). Try this out 
by creating a new module that will import this one. Opena 


created earlier. Name this new file “test.py”. Now add 
this code to create an instance of the BudgetManager 
class that calls methods on it. 


Imports the module 
budget into this new one 





import budget 


outgoings = budget .BudgetManager (2500) 
outgoings.add budget ("Groceries", 500) 


outgoings.print_summary () 


The BudgetManager 
class is referenced by 
adding the budget 
module name before 
it with a full stop 





=) Hacks and tweaks 








Changing your mind 
In the project, you modified the add_ budget method to stop below the existing add_ budget method. You 
the same budget from being added twice. However, it would may need to look at this code carefully to follow 
also be useful to have a way to change a budget later. You can the logic. Add a line in the test.py module to call 
add a new method to do this. Add the following new method this new method so that you can see it working. 
def change budget(self, name, new_amount): Checks if the 
budget to be 
if name not in self.budgets :——— changed exists 
raise ValueError ("Budget does not exist") Gets the old 
amount of 
old amount = self.budgets[name] the budget 
if new_amount > old_amount + self.available:——H\ “hecks ifthe old 
si =i amount added 
raise ValueError ("Insufficient funds") tomeevallable 
amount covers 
self.budgets[name] = new_amount eG ae nena: 
= budget 
self.available -= new_amount - old amount 


return self.available 


Reduces available by 
the difference between the 
old and the new amounts 


Record expenditure details 

So far, the project tracks the total expenditure against each budget. 
However, in a more advanced program you would want to keep 
track of each particular item of expenditure. You can do this by 
using lists of amounts spent inside the expenditure dictionary 
and then adding these together whenever you need the total. 





CREATE AN EXPENDITURE LIST 
Start by modifying the expenditure calf 


F. budgets[name] = amount 


dictionary in the add_ budget method. You 
need to store an empty list inside expenditure, 
instead of 0. This allows multiple values to be 
stored in it. 


self.expenditure[name] = [] 


self.available -= amount 


4 | me | , , « a} if »BaYV = | 1 j=} 
return S@LT.aVdalLaDLe 


Stores an 
empty list 
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ieaa ADD EXPENSES TO LIST 
Now in the spend method, change the expenditure 


variable so that each new expense is added to the list. Since 
expenditure no longer sums up the amounts spent 
automatically, you will have to modify the spent variable to 
perform the calculations and get the total spent so far. 





raise ValueError("No such budget") 


Appends the 


self.expenditure[name] . append (amount) . 
amount to the list 


budgeted = self.budgets [name] 
spent = sum(self.expenditure[name] ) 


return budgeted - spent 


za GET TOTAL EXPENDITURE 
You now need to sum up the items in the print_summary 


method. Modify the spent variable as shown below. You will find 
that the code functions identically if you run the “test.py” module 
again, with a record for each item of expenditure. 


for name in self.budgets: 


budgeted = self.budgets [name] 


Gets the amount spent 


spent = sum(self.expenditure[name] ) for each budget 


remaining = budgeted - spent 





Pygame Zero 


Pygame Zero is a tool that enables programmers to 
build games using Python. It provides a simplified 
way to create programs using the powerful functions 
and data types in the pygame library. 


Installing Pygame Zero on Windows 
The latest versions of pygame and Pygame 





Zero can be installed on a Windows computer © © 
by following the steps given below. An active 
Internet connection is required for this. @ Install a package manager 
The easiest way to install or update Python libraries 


and modules on a system is to use a package manager 
called “pip”. Type the following command in the Command 
Prompt and press Enter. 





Gi) Open the 

Command Prompt 

On a Windows 10 operating 
system, click Start and open the 
Command Prompt by typing 


“Cmd” into the Search field. If 





python -m pip install -U pip 





you have an older version of The Command 
Windows, find the Command Prompt thumbnail 
Prompt in the Systems folder. looks like this 








Installing Pygame Zero on a Mac 
The latest versions of pygame and Pygame Zero 
can be installed on a computer with macOS 
using the “Homebrew package manager”. 
Internet connectivity is essential for this. 


@ Install Python 3 
Next, use “Homebrew” to check if Python 3 


is already installed on the system, and install it if 

not. Type the following command in the Terminal 
window and then press Enter. 

1 Open the Terminal and install a package manager 

Use the Terminal app to install the modules. It can be found e °®@ 

in the “Utilities” folder under “Applications”. Type the following 

command and then press Enter to install “Homebrew”. The installation brew install python3 

process will ask for a user login password to continue, and may take 

some time to complete. 





ee 
ruby -e "$(curl -fsSL https://raw. 
githubusercontent.com/Homebrew/ 


instalL/master/instaLlL)" 
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UPDATES 


Occasionally, programmers may experience problems while 
running Pygame Zero programs after updating to anew 





version of their operating system. To fix this, the tools added 
during Pygame Zero installation can be uninstalled, then 
reinstalled using the instructions here. 














ec ae 


es ~ 


x 


x 
? 


@ Install Pygame 
Once the “pip” package manager is 


installed, type the command shown below 
and then press Enter. This will use “pip” to 
install the pygame library. 





4 Install Pygame Zero 

Finally, type the following 
command and then press Enter. This 
will install Pygame Zero. 







pip install pygame pip install pgzero 


| 


es eee eee ee 
se = sss = ew ae es = = 





By,’ 


=—— eee 


¢ 





Fe, 


O="0: 
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(3) Install extra tools 

To install some extra tools that the system requires 
to run Pygame Zero, use “Homebrew” and type this 
command into the Terminal window followed by Enter. 


brew install sdl sdl_mixer sdl_sound 
sdl_ttf 





& Install Pygame Zero 
Finally, this last command 


will install Pygame Zero. 


pip3 install pgzero 


— eee 


Qe Se 


Now type this 
command to install the pip3 install pygame 


pygame library and \ a a 
N 


press Enter. 


- 
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Knight’s quest 


This fast-paced, two-dimensional game will put your reflexes 
to the test. It uses coordinates to create a two-dimensional 
playing area, and Pygame Zero’s Actor class to introduce the 
characters and collectable items in the game. An event loop 


program makes the game run smoothly. 


How to play this game 

The aim of this game is to navigate the knight around the dungeon — 
a two-dimensional playing area — with the arrow keys, but you cannot 
move through walls or the locked door. Collect the keys by moving 
over them. However, you need to avoid the guards as they try to move 
towards the knight. Any contact with the guards ends the game. You 
win if you can get to the door after picking up all of the keys. 


Pygame Zero Game 





Fre 


a xX 


Dungeon crawl 

This project is an example of a style of 
game called dungeon crawl. In such games, 
the player usually navigates a labyrinthine 
environment, collecting items and battling 
or avoiding enemies. This game will use the 
classic top-down 2D view, where the player 
appears to be looking down at the play area 





rwTvrTvvvTvTvvvTvTvVvTvVvvVTVW Vv 





from above. 


4 


z “4 Chequered 
tiles are 
created and 
used as the 
background 


| Cracks make 
the dungeon 
s sy look more 
| realistic 





Create the 
door anywhere 
along the 
circumference 
of the dungeon 


> How to use lists 


> How to index strings 


>» How to use nested loops 


>» How to use Pygame Zero 
to make a simple game 





The scenery 

The game is based on asimple grid 
on which square images called 
“tiles” are placed. The scenery of the 
game consists of a background of 
floor tiles, with additional tiles 
representing the walls and the door. 





GUARD 





KNIGHT 


Qu 





KEY 


The actors 

The movable or collectable items in 
the game are called actors. In this 
game, the actors are the same size 
as the tiles so that each is contained 
within one grid square. They are 
drawn on top of the scenery so that 
the background can be seen behind 
and through them. 


Time: 
2 hours 
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The concepts in this project are applicable to all kinds 
of 2D computer games, especially ones that are played 


Lines of code: on mobile phones. Apart from in dungeon-crawl 


151 games, image tile grids are also used in colour- and 


Difficulty level shape-matching games. The logic applied in this game 


could also be adapted to simple robotics projects. 





The Pygame Zero game loop 

A Pygame Zero program is an example of an event loop program. An 
event loop runs continuously, calling other parts of the program when 
an event occurs so that actions can be taken. The code necessary to 
manage this loop is part of Pygame Zero, so you only need to write 
the handler functions that deal with these events. 


Set up game 

Top-level statements in the Python file will be 
executed first and can be used to initialize the 
game state and configure Pygame Zero itself. 
Pygame Zero will then open a window and 
repeat the event loop continuously. 


Handle input events 

Pygame Zero will check for input events, 
such as key presses, mouse movements, and 
button presses each time through the loop. 
It will call the appropriate handler function 
(see p.185) when one of these events occurs. 


Handle clock events 

The Pygame Zero clock allows users to 
schedule calls to handler functions in the 
future. These delayed function calls will 

be made during this part of the event loop. 


Update game state 

At this point, Pygame Zero allows the user 
to do any work that they want done on every 
loop iteration by calling the update handler 
function. This is an optional function. 


Draw interface 

Finally, Pygame Zero calls the draw 
handler function, which will redraw the 
contents of the game window to reflect 
the current game state. 








Setting up 

To get started with this project, you will 
first need to create the folders to hold all the files. 
The next step will be to write some code to draw 
the background and the players on screen. 


a CREATE THE GAME FILE cel SET UP THE IMAGES FOLDER 
First, create a new folder on your desktop and You now need a folder to hold the images 





name it “KnightsQuest”. Then, open IDLE and create a new required for this project. Go to the KnightsQuest 

file by choosing the New File option from the File menu. folder and create a new folder inside it called “images”. 
Save this file in the KnightsQuest folder by choosing Save Go to www.dk.com/coding-course and download the 
As... from the same menu. Name the file “quest.py”. resource pack for this book. Then copy the image files 


for this project into the new “images” folder. 





IDLE 





Fle Edit Shell 
New File NR select this option 


Open... lO) to create anewfile 
Open Module... 

Recent Files > 

Module Browser o> B 





130 INITIALIZE PYGAME ZERO Imports the Pygame 
Go to the “quest.py” file you 


created earlier and type these lines of Sere enema 
code into it to define the dimensions 

of the game grid. This will create a 

working Pygame Zero program. Save 1 mpor t pgzrun 

the file, then choose Run Module from 

the Run menu (or press the F5 key on 

your keyboard) to execute the code. 


You will only see a black window at this GRID WIDTH = 16 | 
point. Close this window and continue. _ 
GRID HEIGHT = 12 —————— These define the width and 
7 height of the game grid 
GRID SIZE = 50 and the size of each tile 





WIDTH = GRID_WIDTH * GRID_SIZE 


WIDTH and HEIGHT These define 

are special Pygame HEIGHT = GRID HEIGHT * GRID SIZE | __ thesizeofthe 
Zero variable names -_ _ game window " 
Starts Pygame Zero _____pgZrun.go @) == 


SAVE 


oat 180/181. 


AGILE SOFTWARE DEVELOPMENT 


Each step in this project will describe a new piece of run and try out. This process of evolving a 
functionality that makes the program more useful program by iteratively describing, developing, 
or interesting, and will then show you the code you and testing small pieces of new functionality 
need to add to implement this. At the end of each is part of a style of programming called Agile 
step you will have a working program that you can Software Development. 


or, oe, 





ITERATION 1 ITERATION 2 





DRAW THE BACKGROUND 

In this step, you will draw the floor of the 
dungeon as a grid of floor tiles filling the game window. 
Add the following lines of code to your program. 








This function 


HEIGHT = GRID_HEIGHT * GRID_SIZE converts a grid 
position to screen 
def screen_coords (x, y) TEPEPEPEPELrrrrerrirrrerererrr er tit tt 7 | eer eles 


return (x * GRID SIZE, y * GRID SIZE) 
def draw_background(): 





Loops over 
for! y in range(GRID HEIGHT) ;———————————————>——— ee each grid row 
for x in range(GRID WIDTH): Loops over each 
grid column 


screen.blit("floorl", screen_coords(x, y)) 
def draw(): 
draw_background () 


pgzrun.go() 
The draw handler function Draws the dungeon screen.blit() draws 
is called automatically from floor as a background the named image at the 


the game loop (see p.179) on screen given screen position 


—) SETTING UP 


GRID AND SCREEN COORDINATES 


The playing area in this project is a grid that is 16 
Squares wide and 12 squares high. Each of these squares 
is 50 x 50 pixels. The position of a square is denoted by 
x and y coordinates, written as a pair in brackets (x, y). 
The x coordinate refers to a column number and the y 
coordinate refers to a row number. In programming, 
counting starts at the number 0, so the top left grid 
position for this project is (0, 0) and the bottom right 
grid position is (15, 11). In Python, range(n) iterates over 
the numbers 0 to n-1,so range(GRID_ HEIGHT) is 0...11 
and range(GRID_WIDTH) is 0...15. 

Nesting one loop inside another allows the program 
to iterate across every grid position. Multiplying the 
grid coordinates by the size of the grid squares gives 
the coordinate of the top left corner of that grid square 
relative to the top left corner of the game window. 
Pygame Zero refers to this as the screen. 


DEFINE THE SCENERY 








You can now draw the walls of the 
dungeon, add a door, and define the map of 
the game. Add the following code below the 
constants in your IDLE file to do this. The map is 
defined as a list of 12 strings, each representing a 
row of the grid. Each string is 16 characters wide, 
with each character describing a single grid square. 


Kisakey, and 


Gis a guard 
The dungeon has 12 rows 


and 16 columns of wall tiles 





OUTPUT ON THE SCREEN 


HEIGHT = GRID_HEIGHT * GRID SIZE 
MAP = ["WWWWWWWWWWWWWWWW"- W represents 


"W 
"W 
"W 





a wall tile 


Ww" 


9 
cain mas Spaces represent 


W KG 


WwW", empty squares 


WwW", 


"W WWWWWWWWWW WwW", 


"W 
"W 
"W 
"W 
"W 
"W 


WwW", 


P Wee 
eee P is the player 
WWWWWWWWWW 


GK 


W 


w", 
w", 
w", 
DR 


"WWWWWWWWWWWWWWWW " J 


D is the 
door 
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ADD A FUNCTION TO DRAW THE SCENERY 





Next, add anew draw_ scenery () function above the 
draw() function. This will draw the background of each square on 
the map. Since the map is a list of strings, subscripting it as MAP[y] 
selects the string representing the row of the grid specified by 


y (counting from 0). Subscripting this string with [x] selects 
the character representing the square in the column 
specified by x (also counting from 0). The second subscript 
is written immediately after the first as MAP[y] [x]. 


screen.blit("floorl", screen_coords(x, y) 


def draw _scenery(): 
for y in range (GRID HEIGHT): 

for x in range(GRID WIDTH): 

Square = MAP[y] [x] 


Loops over each 
grid position 


Extracts the 
character from the 
map represented 
by this grid position 





if square == "W": 


screen.bLit("wall", screen_coords(x, y)) 


elif square == "D": 


Draws a wall tile at 
the screen position 
represented by W 


Draws a door tile 
at position D 


screen.bLit("door", screen_coords(x, y)) 


def draw(): 


draw_background () 


Draws the scenery after (on top of) 


draw_scenery () 


THE ACTOR CLASS 


Pygame Zero provides a class called Actor to represent 
the actors, or the movable items, in games. You can 
create an Actor object with the name of the image 

that should be used when drawing it, and then keyword 
arguments that specify other properties of the object, 

if required. The most important property is pos, which 
specifies the screen coordinates that the image should 
be drawn at. The anchor property specifies what point 


THE ACTORS 





the background has been drawn 


on the image the pos coordinates refer to. It 
is a pair of strings where the first gives the x 
anchor point - “left”, “middle”, or “right” - and 
the second gives the y anchor point - “top”, 
“middle”, or “bottom”. You will anchor the 
actors’ pos to the top left of the image, as 
this matches the coordinates returned by 

the screen_coords() function. 


RIGHT 
8 


LEFT MIDDLE 
TOP & z 





Dots and 
labels mark the 
anchor points 








BOTTOM © 





fz) INITIALIZE THE PLAYER 
Create an actor for the player and set its starting 


position on the map. Add a new setup function below the 
screen_coords() function to do this. 


def screen _coords(x, y): 
return (x * GRID SIZE, y * GRID SIZE) 
def setup game(): 


Defines player as 








g1 obal pl EE RRR eo a global variable 
player = Actor("player", anchor=("left", "top"))————— Crates anew Actor object 
and sets its anchor position 
for y in range (GRID HEIGHT) ;: ——————_ [©9Ps over each 
— grid position 
for x in range (GRI D WI DTH) i Extracts the character from 
= : the map representing this 
Square = MAP [y] [x] grid position 
Checks if this grid 
if square == S| EEE [oepitcong) le ini 9] 21,40 Sets the position of pLayer 
to the screen coordinates 
player.pos = screen_coords(x, y) of this grid position 


DRAW THE PLAYER 

After initializing the player, you need to draw it 
onscreen. Addadraw_actors() function above the draw() 
function in the code. Then, add a call to it at the end of the 
draw() function. Finally, call the setup_game() function 
just before Pygame Zero runs. 





screen.blit("door", screen_coords(x, y)) 


def draw_actors(): 





player.draw() Draws the player 
actor on screen at 
its current position 
def draw(Q): P 


draw_background() 
draw_scenery () 
draw_actors() 
setup game () 
pgzrun.go() 
Draws the actors after mt 


(on top of) the background 
and scenery have been drawn SAVE 
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Moving the player 

Now that you have created the player, 
it is time to write code to move it on the screen. 
You will use an event-handler function, which 
reacts to key presses, to do this. 





- = 
















— YES 
Flowchart for the “move” logic 
When the user presses an arrow key, the 
player actor moves in that direction by 
one grid square on the screen, unless that 
Square is occupied by a wall or the door. 


u 
eg 
‘Ge 





(2a) ADD A UTILITY FUNCTION 
First you need to define a function to determine which built-in round () function to make sure that the result is the 


grid square the actor Is in. You can do this by dividing the actor’s nearest whole number. Add this function below the existing 
x and y coordinates by the size of a grid square and then using the screen_coords() function. 
return (x * GRID S$ IZE, vis GRI DS IZE) Determines the position 


; of an actor on the grid 
def grid _coords(actor): 


return (round(actor.x / GRID SIZE), round(actor.y / GRID SIZE)) 





ie arial Last line of the 
| d functi 
handler function that will react draw_actors() are 
when the user presses an arrow r 
key. This ainaion ensures the def on_key_down (key) : — 
player moves in the right direction : : 
if key == keys.LEFT: ona key 


when any of the four arrow keys 
are pressed. Add this new function 








below the draw() function. move _player(-1, 0)—--HH Player moves left 
by one grid square 
elif key == keys.UP: 
move_player(0, -1) Player moves up 
by one grid square 
elif key == keys.RIGHT: 
Seeeeeeeeee Player moves right 
ReGSePESseRReRneD by one grid square 
elif key == keys.DOWN: 
move player(0O, 1) Player moves down 


by one grid square 


(23) MOVE THE ACTOR 
Next, define the 








def move_player (dx, dy): Gets the current 
move_pLayer() function. This —Pheay saaE y) grid position 
function takes the distance in grid pa : 
X Sieh r l r of pLayer 

squares that a player moves on the il SuidaeeeneekRleven) 
x and y axes, respectively. Add this += d Adds the x axis 

ean X X 
function immediately after the distance to x 
on_key_down() function. = a oo A LAG tle eeu 

y += dy 


distance to y 
Gives the tile at 





square = MAP[y] [x] 








this position 
Stops the execution of the if square == "W": 
move_pLayer() function, if 
the player touches the wall return 
elif square == "D": 
Updates position return Returns 
of player to the immediately 


new coordinates ________player.pos = screen_coords(x, y) eee 
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MOVING ON THE GRID 


As the grid and screen coordinates start 
at the top left corner, moving left on the 
grid represents a negative change on 
the x axis and moving right represents 

a positive change. Similarly, moving up 
is anegative change on the y axis and 





moving down Is a positive change. 





Add some keys for the player to collect. For each key 
marked on the map, create an actor with the key image 
and set its position to the screen coordinates of that grid 
position. Add this code to the setup_ game () function 
to create the key actors. Keys will 
appear at the 
coordinates 
set in the code 


Defines keys_to_collect 
as a global variable 
def setup game(): 
global player, keys_to collect 
player = Actor("player", anchor=("Left", "top")) 
keys vekol Ketan eche) |] a Sets keys_to_ collect 
an to an empty list initially 
for y in range (GRID HEIGHT): 
for x in range(GRID WIDTH): 
square = MAP[y] [x] 
if square == "P": 


player.pos = screen_coords(x, y) 
Creates a key if 


elif square == "K";———___ the square is K 
Creates the key 
key = Actor("key", anchor=("Left", "top"), \ actor with an 
image, anchor, 
obsttetdeteht tdelel eel] i) ea re 


Adds this actor 
to the list of keys 
created above 





keys to colLlect.append (key) 


a) ADD THE KEYS 


SPECIAL NAMES 


It would have seemed natural to name the 
global variable with the list of key actors, 
keys. However, you need to be careful when 
choosing names for your variables to avoid 


confusion with either built-in function names 
or names that are special to Pygame Zero. 
You may remember from the last step 

that keys is a special object with items 
representing all of the keys on the keyboard. 





Bl DRAW NEW KEY ACTORS 
Make the game more interesting by adding 


multiple keys for the player to collect. Draw the new 
key actors by adding the following lines to the 
draw_actors() function. 


def draw_actors(): 
Draws all the actors in the 
pl ayer. draw () list keys_to_collect 
for key in keys _ to collect: 


key .draw() 


3.2 PICK UP THE KEYS 
When the player actor moves into a grid square 


containing a key, the program will remove that key from 
the list of keys to be collected and stop drawing it on 
screen. When there are no more keys to be collected, 
the player actor will be allowed to move into the grid 
Square containing the door. Make the following changes 
to the move_ pLayer() function to do this. Then, save 
the code and try running the program to check if you 
can move around and pick up the keys. You should be 
able to go into the door square once you pick up all the 
keys, but see what happens if you try moving further - 
we will fix this problem in the next few steps. 


Move the player over 
the key to pick it up 


Checks if the 
keys_to_collect 
list is not empty 


elif square == "D": 


if Len(keys_ to collect) > 0: 


return 


for key in keys to collect: 


if x == key_x and y == key y: 


Returns immediately if 
the list is not empty 







Loops over each of the 
key actors in the list 


Gets the grid position 
ie of a key actor 
Checks if the new player position 


Removes this key from the 


(key _x, key_y) = 


keys _ to collect.remove (key) 


break 


player.pos = screen_coords(x, y) 


list if player position matches 
key position 


Breaks out of the for - 
loop, as each square can 
only contain one key 


SAVE 


PYTHON 
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GAME OVER! 

If the player actor moves into the grid square that 
contains the door (after having picked up all of the keys) then 
the game should come to an end and the player should no longer 
be allowed to move. To do this, update the setup_ game () 
function to define a new global variable that checks whether the 
game Is over or not. 








Defines game_over 
as a global variable 


def setup game(): 


global game_over, player, keys to collect 


Sets the 
variable to 
False initially 


False 





game_over = 
player = Actor("player", anchor=("Left", "top")) 
keys to collect = [] 


for y in range (GRID HEIGHT): 


34 TRIGGER GAME OVER 
Now set the game to 


be over when the player gets 
to the door. Make the following 


changes to the move_ player () 
function. Run the program to try 
it out. You should not be able to 
move when you get to the door 


def move _ player (dx, dy): 


global game_over 


Checks if game_over 





so the program will not crash. if game over: 


is set 
return Returns 
immediately, 
(x, y) = grid coords (player) without 
moving 
x += dx 
Witaddy 
square = MAP[y] [x] 
if square == "W": 
return 
elif square == "D": eeesne. 


over to True 
and continues 


if lLen(keys to collect) > 0: 






return Checks if all the move 
the keys have 
else: been picked 





game over = True 


for key in keys _to collect: 





SAVE 


SS ADD THE KEYS 


35 GAME OVER MESSAGE — , | = 
When the player gets to the door, the program stops, 


but it is not clear to the user that the game is over. You need 


to add a GAME OVER message to your code that is displayed 
on screen when the game ends. Define a new function, 
draw_game_over(), to drawa GAME OVER overlay on 
the screen. Add the code above the draw() function. 


Sets the position 
of the GAME OVER 
message on screen 








def draw_game_ over (): Anchors the 
text by its Draws the text 
screen_middle = (WIDTH / 2, HEIGHT / 2) bottom edge at this location 


def 


screen.draw.text ("GAME OVER", midbottom=screen middle, \ 
fontsize=GRID SIZE, color="cyan", owidth=1) 
draw(): 
draw_background () Draws the text 
at this location 
draw_scenery () 
draw_actors() 
if game_over: 


draw_game_over () 


DRAWING TEXT WITH PYGAME ZERO eee 


The screen.draw.text() KEYWORD ARGUMENTS 

function allows youto draw | paperty ame lll O33 
a piece of text on screen. 

This function takes a string fontsize The font size in pixels 

with the text to be drawn and 

then some optional keyword A string giving a colour name or an HTML-style “#FFOOFF” 
arguments, as shown here. colour, or an (r, g, b) “tuple” such as (255, 0, 255) 

See the Pygame Zero 


online documentation A number giving a relative width of an outline to draw around 
for other keywords. owidth each character; defaults to 0 if not specified; 1 represents a 





reasonable outline width 


re The colour for the outline (in the same format as color), 
defaults to “black” if not specified 

topleft, bottomleft, topright, 
bottomright, midtop, midleft, 
midbottom, midright, center 


Use one of these with a pair of numbers to give the x and y 
screen coordinates relative to an anchor point 
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CREATE THE GUARD ACTORS 
The game is pretty easy to win so far. To make 
it more difficult, add some guards as obstacles. For each 
guard on the map, create an actor with a guard image 
and set its position to the screen coordinates of that grid Defines guards 
position. Update the setup_ game() function to do this. as a global variable 








def setup game(): 
global game over, player, keys _to collect, guards 
game over = False 
player = Actor("pLayer", anchor=("Left", "top")) 
keys to collect = [] eb eit 
guards) =) [) ee ee ee See empty list initially 
for y in range (GRID HEIGHT): 
for x in range (GRID WIDTH): 
square = MAP[y] [x] 
if square == "P": 
player.pos = screen_coords(x, y) 
elif square == "K": 
key = Actor("key", anchor=("Left", "top"), \ 
pos=screen_coords(x, y)) 
keys to collect.append (key) Creates the 
elif square == "G": TTT 
guard = Actor("guard", anchor=("Left", "top"), \ 


pos=screen_coords(x, y)) 


guards.append (guard) 





Creates a guard if Adds this actor to the list 
the square is G of guards created above 


(37) DRAW THE GUARDS 
To add another guard to the game, 


add this code to the draw_actors() function. key . draw () 

Save the code and then run the program to ; ‘i - " 

check if the guards appear on screen. for guard in guards: ion tr ‘. 
guard. draw () ————_'ist guards 


SAVE 


ee MOVING THE GUARDS 


Moving the guards 


Once the guards are in place, they will attempt 





to move one grid square closer to the player along either 
the x or y axis every half-second, unless they move into 
a Square occupied by a wall. If the move takes the guard 
into the same grid position as the player, then the game 
is over. Like the player, the guards should not move 

if the game is over. Add the code in this section to 

make the guards move. 


YES 


> 


/“ 


[Tae 
i 
ees 
‘ 
Se 
‘ 
SESE 
‘ 

eS 


jv“ 









LD 








gsm MOOD 








ADD A FUNCTION TO MOVE A GUARD 
Start by adding a new function, move_guard(), to Checks if the player is 
move a single guard. The code will work for any guard actor, Gets the grid to the right of the guard, 
SO pass an argument for the guard you want to move. Add the position of the and whether the square 
following code immediately after the move_pLayer() function. player actor to the right is a wall Sat oes, 





def move_guard (guard): 
Defines game_over 








global game over as a global variable 
if game_over: Returns immediately, 
a without moving, if 
return the game is over 


(pLayer_x, player_y) = grid _coords(player)  Getsthe grid 
position of this 


(guard x, guard y) = grid coords (guard) ——— 81rd actor 





if player_x > guard x and MAP[guard y][guard x + 1] != "WwW": 


Increases the guard's x grid position 
by 1 if the above condition is true 





guard x += 1 
elif player_x < guard x and MAP[guard y] [guard x - 1] != "W": 


guard x -= 1 | Checks if the player is 
ng to the left of the guard 


elif player_y > guard y and MAP[guard y + 1][guard x] != "WwW": 


guard y += 1 
elif player_y < guard y and MAP[guard y - 1][guard x] != "WwW": 
guard y -= 1 
guard.pos = screen_coords(guard x, guard_y)——— Updates the guard actor's 
position to the screen 
if)\guard) x == player x!and! giard!y ==! player! y=) /)/coordinatesiof the (possibly 


updated) grid position 
game over = True 


Ends the game if the guard’s 
grid position is the same as 
the player's grid position 


MOVE ALL THE GUARDS 
Next, add a function to move ; Loops through 
each of the guards in turn. Add this def move_guards () : each guard actor 
code just below the lines you typed in guards list 
in the previous step. 





for guard in guards: 


move _ guard (guard) ——______—_ Moves all the guard 
actors in the list 


SS MOVING THE GUARDS 





CALL THE FUNCTION 


Finally, add this code to call GRI D S I Z F =] 5 0 Sets the time interval 

oe rds v4 es every for a guard to move 
alf-second. You need to add a new m ansereen 
constant at the top of the file to specify GUARD_MOVE_INTERVAL 0.5 
this interval. 
44 SCHEDULE THE CALL 

To ensure that the guards move smoothly after GUARD_MOVE_INTERVAL seconds. Run the program and 
every half-second, you need to add a timer that calls the check if the guards chase the player. You should be able to see 
move_guards() function repeatedly during the course the GAME OVER message if a guard catches the player. Try 
of the program. Add the following code at the bottom of changing the value of GUARD_MOVE_INTERVAL to make the 
the file. This calls the move_guards() function after every game easier or harder. 


setup game () 


clock.schedule_ interval (move guards, GUARD MOVE INTERVAL) 
pgzrun.go() 





Schedules regular calls to the 
move_guards() function SAVE 


THE CLOCK OBJECT ec0e 


The clock object has methods for scheduling function only schedule calls to functions that take 

calls in a program. Some of them are given here. When no arguments as there is no way to specify what 
calling a function, make sure you use the name of the arguments would be used when the call is made 
function without the brackets. This is because you can in the future. 


METHODS FOR SCHEDULING FUNCTION CALLS 


Call the function in delay seconds - multiple calls to this will 
schedule multiple future calls to the function, even if the 
previous ones have not yet happened 


clock.schedule(function, delay) 


clock.schedule_unique(function, delay) Similar to clock.schedule(), except that multiple calls to this will 
cancel any previously scheduled calls that have not yet happened 


clock.schedule_interval(function, interval) Call the function every interval seconds 


clock.unschedule(function) Cancel any previously scheduled calls to the function 
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TRACK THE RESULT 
When the game finishes and the GAME OVER 
message is displayed, you can show an additional message to 
indicate whether the player unlocked the door and won, or 
was caught by a guard and lost. Create a new global variable 
to track whether the player won or lost. Add this code to the Defines player_won 
setup _game() function. as a global variable 








def setup game(): 
global game over, player_won, player, keys _to collect, guards 
game over = False 


player_won = False—— Sets the variable to 
am False initially 


player = Actor("player", anchor=("Left", "top")) 


SET A VARIABLE 

Now set the global 
variable when the game finishes 
because the player reached the 
door with all of the keys. Add this 
code to the move_ pLayer() 
function to do this. 





def move player (dx, dy): 
global game over, player_won 
if game _ over: 
return 


(x, y) = grid_coords(pLayer) 


x += dx 

vEHSuey 

square = MAP[y] [x] 

if square == "W": 
return 

elif square == "D": 


if Len(keys_ to collect) > 0: 
return 
else: 
game_over = True 
Sets it to True when the __________________py]ayer_won = True 


player wins the game 
for key in keys to collect: 


a) TRACK THE RESULT 


5.2 ADD THE MESSAGES 
Collecting all of the keys and reaching the door is the new message. This anchors the top edge of the message 


the only way that the player can win the game, so it is safe to to the centre of the screen. As the GAME OVER message is 
assume that if the game finishes any other way, the player has anchored by its bottom edge, this new message will appear 
lost. You need to display an appropriate message in each case. centred below it. Try running the game and deliberately 
Add the following code to the draw_game_ over () function. losing. Now close the window and run it again, but try to 
You will be using the midtop property to set the location of win this time. It should not be too hard. 


screen.draw.text ("GAME OVER", midbottom=screen middle, \ 
fontsize=GRID SIZE, color="cyan", owidth=1) 
if player_won: 
screen.draw.text ("You won!", midtop=screen_ middle, \ 
fontsize=GRID SIZE, color="green", owidth=1) 
Draws the message 
else: on screen 
screen.draw.text("You Lost!", midtop=screen middle, \ 
fontsize=GRID SIZE, color="red", owidth=1) 
Use different colours 


to emphasize the 
different outcomes 


The new message 
appears here 





SAVE 
5.3 REPLAY THE GAME 
At the moment, the only way to have another go just need to call the setup_ game() function 
at the game is to close the window and run the program again. It contains all the code that is necessary 
again. Add the following code after the draw() function to initialize the game, and will recreate all of 
to allow the user to press the space-bar when the game the actors in their starting positions. It will also 
ends to play again. To reset the game to the beginning, you reset the variables that track game progress. 


if game _ over: 


draw _game_ over () 


Checks if the space-bar 
has been pressed once 
the game is over 


def on_key_up(key): 





if key == keys.SPACE and game over: 





setup_game () Calls setup_game() 
to reset the game 


apc MOOR 





ADD ANOTHER MESSAGE 

It will be useful to tell the player that they 
can press the space-bar to restart. To do this, add a new 
message at the end of the draw_game_ over () function. 
You need to use midtop anchoring again to position the 
text GRID_SIZE pixels below the centre of the screen. 
Run the game. You should be able to replay it now. 





else: 
screen.draw.text("You Lost!", midtop=screen middle, \ 
fontsize=GRID SIZE, color="red", owidth=1) 
screen.draw.text("Press SPACE to play again", midtop=(WIDTH / 2, \ 
See aE HEIGHT / 2 + GRID SIZE), fontsize=GRID SIZE / 2, \ 


aie ea color="cyan", owidth=1) 





Animating the actors 

The game feels a little odd at the moment as the actors jump 
from one square to another in the grid. It would be much better if 
they looked more like they were moving on the screen. You can make 
that happen by using Pygame Zero’s animate() function. 


6.1— ANIMATE THE GUARDS 
Start by animating the guards. The animate () function animate (guard), the property that you want to 


creates animations that run automatically on each iteration of the change (pos), and how long the animation will run 
game loop to update the properties of actors. Make the following (duration). If you save and run the code now, you 
change to the move_guard() function to animate the guards. The will see the guards moving smoothly across the screen 
parameters of the animate () function will include the actor to towards the player. 


elif player_y < guard y and MAP[guard y - 1][guard x] != "W": 





guard y -= 1 
animate (guard, pos=screen_coords(guard x, guard y), \ 
duration=GUARD MOVE_INTERVAL) Moves the actor 
smoothly instead 
if guard x == player_x and guard y == player yy: of changing its 


position suddenly 
game over = True 


SS ANIMATING THE ACTORS 


ANIMATIONS 


The animate() function can take two other 
optional keyword arguments - tween, which 
specifies how to animate the in-between values 
of the property, and on_finished, which 


allows you to specify the name of a function you 
want to call after the animation is complete. 

The value of tween should be one of the 

strings mentioned below. 


VALUE OF THE TWEEN KEYWORD ARGUMENT 


"linear" 


Animate evenly from the current property value to the new; 


this is the default 


"accelerate" 


"decelerate" 


"accel _decel" 


"end_elastic" 


"start_elastic" 


"both_elastic" 


"bounce_end" 


“bounce _ start" 


"bounce_start_end" 


Start slowly and speed up 
Start quickly and slow down 


Speed up and then slow down again 


Wobble (as if attached to an elastic band) at the end 


Wobble at the start 

Wobble at the start and the end 
Bounce (as a ball would) at the end 
Bounce at the start 


Bounce at the start and the end 





6.2 ANIMATE THE PLAYER 
Now it is time to animate the player actor. duration the user will take to tap the movement keys to 


Unlike the guards, the player does not have a particular 
rate at which it moves, so you need to define how quickly 
a move should be completed. Add a new constant at 

the top of your file to do this. Choose 0.1 seconds as the 


GUARD_MOVE_INTERVAL = 0.5 


quickly evade the guards. Update the move_plLayer () 
function as shown below. Try the game again and 
check if the player actor slides quickly from square 

to square. 


Time it takes for the player 





PLAYER_MOVE_ INTERVAL = 0.1 


actor to move from one 
position to another 


keys to collect.remove (key) 


break 


animate(pLayer, pos=screen_coords(x, y), \ 


duration=PLAYER_MOVE_INTERVAL) 


Updates the 
player's position NY 
after 0.1 seconds 





SAVE 






MMe Cased Books 
Knight's quest 

Make a chequerboard background 

Now return to some of the earlier graphical 
elements and see if you can make the game look a little 
more interesting. At the moment, the background is just 
a single tile repeated across the entire floor. Add a 
chequerboard pattern to break things up a little and 
make the floor look more “tiled”. 


[71 UPDATE THE BACKGROUND FUNCTION 
For a chequerboard pattern, on the first row, all of the odd then the second colour for the other squares. You can 


squares should be one colour and the even squares another; onthe — determine if a number is odd or even by using Python's 


second row the colours need to be swapped. The following rows modulo operator (see box below). Make the following 
should repeat this pattern. You can do this by using the first colour changes to the draw_background() function to 
on either odd columns of odd rows or even columns of even rows, select a different floor tile image for alternate squares. 


def draw _background(): 
for y in range(GRID_ HEIGHT): 


for x in range (GRID WIDTH): Checks if the x and y Draws the floor1 tile 
=p values are either both at this position if the 
THRoxeueDhee y yA pe yo bE odd or both even above condition is true 


screen.blit("floorl", screen _coords(x, y)) 
else: 


screen.blit("floor2", screen_coords(x, y)) 


Draws the floor2 tile 
if either of the x and y 
values are odd and even 


THE MODULO (REMAINDER) OPERATOR eee 


An odd or even number can be determined by 
dividing the number by two and then looking to see 

if there is a remainder or not. Python has an arithmetic 
operator, called the modulo operator, that returns the 
remainder from a division. It is written as a % b, which 


gives the remainder of dividing a by b. Take a look at 
the remainders after dividing the x and y coordinates 
by two. If the remainders are the same, then either 
the row and column are both odd or they are both 
even. Shown here are some examples of how the 
modulo operator works. 


wo ON A UBRWN = CO |Z 
—= OC = O-zA CO = CO = OO 
ON=Z ON= ON = 
=OOWN = 0O0OWUWNN = 
hWN= O FWN = 





[7.2] CRACKING UP! 
Finally, make the dungeon look more realistic by adding ( ) 


returns a random whole number between a and b (see box, right 
some cracks in the floor tiles. You can do this by drawing the cracks = You will choose random numbers in the draw_background() 


on top of the floor tile images. Make sure to add cracks on only a function and decide when to draw a crack based on them. Since 
few tiles; you can choose these tiles at random. Start by importing the same squares need to be picked for the cracks every time the 
Python’s random module and add it to the top of your file. You draw_background() function is called, set the “seed value” 
need to use the randint(a, b) function from this module, which (see box, right) to a specific number at the start of the function. 
import pgzrun PLAYER_MOVE INTERVAL = 0.1 
import random BACKGROUND SEED = 123456 
Makes the functionality in the Adds a new constant 
random module available for the seed value at 


the top of the file 


Tells the program to pick random numbers 
starting from BACKGROUND_ SEED 


def draw_background(): 
random.seed (BACKGROUND SEED) 
for y in range (GRID HEIGHT): 
for x in range(GRID WIDTH): 
if x %2 ==y %2: 


screen.blit("floorl", screen_coords(x, y)) 


else: 
screen.blit("floor2", screen _coords(x, y)) Picks a random 
> number between 
aL eben etch dc | eT 
, sey en eg ng es peg open es gps og oe wn ahd GK Sul field 
if n< 5: less than 5 
screen.blit("crack1", screen _coords(x, y))——— Prawscracklon 
seni top of the floor tile 
elif n < 10: at this position if n 
is less than 5 


screen.bLit("crack2", screen _coords(x, y)) 


Checks if n is Draws Crack2 on top of the 
less than 10 floor tile at this position if n is 
less than 10, but not less than 5 
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RANDOM NUMBERS AND PROBABILITY 


The randint() function returns a number in a specific 
range. Repeated calls will return numbers that are roughly 
distributed across this range. To be more precise, this 
function actually returns a pseudo-random number. 
These are numbers that appear random - in that the 
numbers are evenly distributed across the range and the 
sequence does not look obviously predictable - but are 
actually generated by an algorithm that will always 
generate the same sequence of numbers from a given 
starting point. You can call the starting point for a 
pseudo-random sequence the “seed”. If you repeatedly 
pick random numbers between 0 and 99, then you should 


n = random.randint(0O, 99) 


if n< 5: 


screen.bLit("crack1", screen_coords(x, y)) 


elif n < 10: 


screen. bLit("crack2", screen_coords(x, y)) 





get the numbers 0 to 4 about 5% of the time. If you 
look at the example below, you will see that if nis a 
number between 0 and 4, crack1 image will be 
drawn. So you can expect this to happen for about 
five per cent of the floor tiles. If n is greater than 5 
and lies between 5 and 9, crack2 image will be 
drawn, which should also happen for about five per 
cent of the tiles. If you look carefully at the map, 
you will be able to count 118 exposed floor tiles, so 
you should expect to see about six of each types of 
cracks (five per cent of 118). 


Tells the code to pick 
a random number 
between 0 and 99 


Draws crackl ifn 
is between 0 and 4 


Draws crack 2 ifn 
is between 5 and9 





73. TIME TO PLAY 
The game should now be ready to play. 


Run the program to make sure it is working properly. 
If there is a problem, carefully check your code for 
bugs (see pp.130-33) and run it again. 


Move the player 
quickly to collect 
all the keys. Watch 
out for the guards 





SAVE 


<) Hacks and tweaks 


Opening the door 

While users may immediately realize that they need to collect 

the keys, it may not be obvious when they can leave the dungeon. 
If you can visually open the door when the last key has been 
collected, it will be obvious what to do. The easiest way to do this 


is to only draw the door when there are no keys 
left to be collected. In the draw_scenery() 
function, change the logic for deciding when 

to draw the door as shown here. 


screen.blit("waLL", screen_coords(x, y)) 


elif square == "D" and Len(keys_to_ collect) > 0: —— Checksifthere 


screen.blit("door", screen_coords(x, y)) 


Keep moving 

It would help if the player could move continuously in one 
direction by holding down an arrow key instead of repeatedly 
pressing it. To do this, you can use the on_finished argument of 
animate () function. This allows the user to specify a function to 
be called when the actor has finished moving. Make a change in 
the move_pLayer () function, as shown here. Then add a new 


break 


are any keys left 
to be collected 


repeat _player_move() function below the move_ player () 
function. It uses members of Pygame Zero’s keyboard object to 
check if a particular key is pressed. You might find that the game is 
now too easy. You can change the PLAYER_MOVE_INTERVAL 
constant at the top of the file to slow the player down and make 
the game more challenging. 


Checks if the arrow 
key is still pressed and 
repeats the move 


animate (player, pos=screen_coords(x, y), \ 


duration=PLAYER_MOVE_INTERVAL, \ 


on_finished=repeat_player_move) 


def repeat_player_move(): 


if keyboard.left: 





move _player(-1, 0) 
elif keyboard.up: 

move player(0, -1) 
elif keyboard.right: 

move _player(1, 0) 
elif keyboard.down: 

move _player(0, 1) 


Checks if the 
left arrow key 
is still pressed 


Calls move_ player () 
again to repeat 
the move 


The player will now 
move continuously in 
the chosen direction 


Set this to half the 
guard’s move interval, 
giving the player less of 
an advantage 


GUARD_MOVE_INTERVAL = 0.5 
PLAYER_MOVE_ INTERVAL = 0.25 
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Make a bit more room 





You can make the game more interesting by designing a file. Then carefully edit the MAP constant as 
larger, more complicated map. You can design your own, shown here. You can add as many guards or 
but try this one to get the idea. First, change the size of the keys as you want because of the way you have 


grid by editing the values of the constants at the top of the written the code. 


GRID _ WIDTH = 20 MAP = ["WWWWWWWWWWWWWWWWWWWW" , 
GRID HEIGHT = 15 "W W WwW", 
"W W Ww" : 
Increase the value This dungeon has "W W W DG 

of these variables 20 columns, so 
there should be 20 W "W WG K W Ww" ; 


characters in this line 
"W WWWWWWWWWWWW WwW", 


Remember to add 7 - 
the door in this line W W ’ 


"W WwW", 
"W WWWWW WWWWW WT", 
"WW W KW WT", 
"Ww W P WG W~ WwW", 
"W WWWWWWWW W- WwW", 
"W G Ww", 
"W K Ww", 
"WWWWWWWWWWWWWWWWWWWW ” 


This dungeon has 15 
rows, so there should 
LARGE PLAYING AREA be 15 lines in total 





Upload new characters 

You can upload your own images 
to add different characters to the 
game, or set it up in a completely 
new background. Copy the new 
images into the “images” folder 
you created earlier. Then, update 
the code so that the actor image 
names match the new file names. 





ENEMY PLAYER ITEM 





How the Web works 


The World Wide Web is a set of technologies that work 

together to allow information to be shared between computers 

via the Internet. The Web is characterized by its combination 

of text, images, video, and audio to deliver an interactive 

multimedia experience. cece 


Connecting to a website 
The Web is based on a client/server 


Request —) 


@ The web browser sends a request 


message to a router, which sends the 
model. A browser is a client that message to the destination web server 


requests a web page from a server. via the Internet. The web server will  —  —| — | . 





The server then responds to the oot siecle rr 

request by sending an HTML file. ‘ - 

The content of each request is 

determined by the communication aa INTERNET SERVICE 
: ser types In the PROVIDER (ISP 

— shia ery aia 7 gaeche (ISP) 

ransfer Protoco is the 

most common protocol used over 

the Internet — a global network eco 

created from connections between www.dk.com 

billions of devices. 





ROUTER 


a) Enter web page URL 

The process begins when a user enters a 
Uniform Resource Locator (URL) into the address 
bar of an Internet browser. This url contains the 


address of the requested web page and can be used 
to locate the web server that hosts the website. 





The router and the 
ISP connect the user 
to the Internet 








Packets and IP routing The file is 
All communication over the Web divided into 
is done by dividing the request into packets 
smaller segments of data called 
packets. These packets are routed 
from the source to the destination, 
where they are reassembled into 
the original message. The networks 
that convey data in packets are 
called “packet switched networks”. 
Packets consist of two parts: 
information and data. Information 
defines where and how to send the 
data, while data is the content that 
the packet is trying to deliver. 






Each packet travels 
independently, often 
along different paths 


User selects the 
file to be sent 





Finding the 
website 
The Domain Name 
Systems (DNS) protocol 
allows the browser to 
convert the human- 
friendly text into an IP 
DNS address. This address is 
then used by the routers 
to find a path to the web 
server. The request may 
be passed along many 
routers before it arrives at 
the destination web server. 





The website is 
displayed on the 
user’s hardware 


4 View the page 
The web server 
receives the request 
and returns an HTML 
file as a response to 
the browser. The 
browser reads the 
contents of the HTML 
document and renders 
the text, images, and 
data on screen. 








Why packets? 

To allow communication 
channels to be used more 
efficiently, images, text, and even 
basic HTTP requests are broken 
down and transferred piece by 
piece. Each piece of data has a 
packet sequence, which tells 

the receiving server how to 
reassemble the information. 





The reassembled 
file can be viewed 
by the receiver 


The file is 
reassembled in 
the right order 
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Protocols 

A protocol is a set of rules that governs 

the communication between two entities. 
Protocols on the Web exist to manage the 
communication between the client browser 
and the web server. Network protocols are 
structured as a series of layers. Each layer is 
designed for a specific purpose, and exists 
on both the sending and receiving hosts. 








Application layer protocol 

Defines how an application must format 
its data so that it can communicate with 
other applications. For example, HTTP 
and File Transfer Protocol (FTP) define 
how a web browser can communicate 
with a web server. 


Link layer protocol 

Defines how data can be sent from 

one network to another by using routers 
to find the destination computer and 
deliver the message. 


Transport layer protocol 

Defines how to manage communications 
by maintaining sessions between the 
source and destination computers and 
combining the received packets back 
into the correct order. 


Web protocols 

Transmission Control Protocol (TCP) 
manages the sessions and ordering of the 
packets received by the browser. Internet 
Protocol (IP) handles routing of data 
between the client and the server. HTTP/ 
FTP/UDP (User Datagram Protocol) defines 
the messages being sent between the 
browser and the server. 


HTTP is an application level protocol that 
describes how a client can format and 
send a request message to a server, and 


how the server can format and reply with 
a response message. 

¢- The GET method retrieves data 

* The POST method updates data 

* The PUT method creates data 

* The DELETE method removes data 





Code editors 


One of the most important tools for programmers, code editors are 
specifically designed for editing the source code of computer programs. 
They can be stand-alone applications or part of any IDE (see p.23) 

or web browser. A number of code editors are available online, all 
customized to fit specific work situations or programming languages. 


Code editor tools 

Simple text editors, such as Notepad, can be used to 
write code, but they cannot enhance or ease the process 
of code editing. The code editors available online have 
specialized functionalities, or certain built-in features, 


Syntax highlighting 

Displays different parts of the code in 
different colours, making the code easier 
to read. For example, HTML tags are 
highlighted in one colour and comments 
are highlighted in another colour. 


Printing 

Enables the programmer to print a 
hard copy of the code. The output 
can then be shared and used as a 
tool to facilitate communication 
and problem solving. 








that simplify and accelerate the process of editing. 
These elements automate common repetitive tasks 
and assist the programmer to write better software 
by identifying problems and debugging code. Some 
of the most useful code editor tools are listed here. 


Multiview 

Allows the programmer to view 
multiple files side by side. Some 
code editors even allow two 
instances of the same file to be 
viewed alongside each other. 


Preview window 

. Allows the programmer to see a 
_ quick representation of how the 

~ HTML code will render without 
having to start a web server to 

execute the code. 





Types of code editors 


LIGHTWEIGHT EDITORS 


There are two types of code -— odeeditors = Features 


editors most commonly used by 


Brackets 
programmers — lightweight editors 
and IDEs. The choice of editor 
to be used depends on the 
programming language and the me 


type of program to be edited. 


Sublime Text 


Lightweight editors 

These editors are used to open and edit a file WieiniicnidciGede 
instantly. They have basic features and are fast 

and simple to use. Lightweight editors can 

only be used when working on a single file. 

This table lists some of the most commonly 

used lightweight editors. 


An open source code editor that focuses on web development 
languages, such as HTML, CSS, and JavaScript. It has lots of 
useful extensions and plugins. (http://brackets.io/) 


A hackable open source code editor that supports many 
languages and is designed primarily for web development. Atom 
is well integrated with Git (a free system for tracking changes in 
source code) and has lots of custom plugins. (https://atom.io/) 


A small but powerful code editor that works with 
several languages and has many tools and shortcuts 
to aid coding. (https://www.sublimetext.com/) 


Smaller and simpler than the Community edition 

(see right), Code is a very popular editor that can work 
with many languages and has advanced features. 
(https://visualstudio.microsoft.com/) 
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CLIENT-SIDE AND SERVER-SIDE SCRIPTING 


In client-side scripting, processing takes 

place in a web browser. The code is Giensrdecede Ce) 
transferred from a web server to the seis Te bec aleee wt "', 

user's browser over the Internet. Pe «> 





In server-side scripting, processing 
takes place on a web server. The user 
sends a request to the web server over 
the Internet, which is fulfilled when the Canjapeidacodaruns 
server generates dynamic HTML pages on the web server 
in response and sends them to the user's 
browser through the same channel. CLIENT SIDE SERVER SIDE 


INTERNET *e, 





Tabs 

Tabs provide an easy way to arrange 
and manage multiple open files in 

a code editor. Each tab displays the 
name of a file, and clicking the name 
displays the file in a code window. 


Zoom 

Zooming in makes a part of the 
text larger and easier to read, 
while zooming out offers a quick 
way to view the entire document 
on the screen in one go. 





Plugins 

Many code editors allow programmers 
to write plugins to extend the features 
of a code editor. For example, adding 

a spell checker or a plugin to 

format HTML. 


Error and warning marks 
These indicate the presence of 
a spelling mistake or a syntax 
error that could cause the 
program to stop executing 

or behave unexpectedly. 








INTEGRATED DEVELOPMENT ENVIRONMENT 


WebStorm A fully featured IDE for web development that uses client-side 
JavaScript frameworks (see pp.284-85), such as Angular, TypeScript, 
Vue, and React, and server-side development applications, such as 
Node js. (https:/Awww,jetbrains.com/webstorm/) 





NetBeans Can be used for developing web and desktop applications 
using open source languages, such as Java and PHP, and web 
development languages, such as HTML, CSS, and JavaScript. 
(https://netbeans.org/) 


CodePen An online code editor that can be used for testing and sharing 
HTML, CSS, and JavaScript code snippets. It is very useful for 
finding important components to use on websites. IDEs 
(https://codepen.io/) IDEs are powerful editors that work 
with many languages and have 
Visual Studio Community Used to create web and desktop applications for Microsoft, advanced features that enable a 


programmer to integrate several 
languages into a single solution. 
IDEs are used when working on the 
entire project. This table lists a few 
commonly used IDEs. 


Apple, and Linux environments. It helps programmers build 
large-scale systems using multiple languages and frameworks. 
(https://visualstudio.microsoft.com/) 


Exploring basic HTML 


HTML is the most basic building block of the Web. An HTML file 
contains all the text, images, and data that is displayed on the 
browser. It also includes a list of any other files, such as fonts, styles, 
and scripts that are required to render the HTML elements correctly. 


HTML tags 
An HTML tag is a keyword, or a set of characters, that 
defines the format of a web page and determines how 


set of brackets, but some tags do not require a closing 
tag and include a closing slash to indicate that they 
are single tags. 














its content is displayed on screen. The combination Element 
and order of the HTML tags determine the structure 
and design of the HTML document. A client browser <div>—— Parent tag 
uses the information in each tag to understand the g 5 Sen EEE 3 — 
nature of the tags’ content and how to display them pS Pallaselesnieteballg child tag 
correctly. The combination of a tag and its content is </div> 
known as an element. Some tags, called parent tags, 
can contain other tags, called children tags. Most 
tags must have an opening and closing tag, like a Opening tag Content Closing tag 
<img/ z ane 
: The <img/> tag !S ae ee 
é 
<body></body, <P></p> rare oS oe recone the url 
The <bodys nih This tag contains the ee for all Maes aa to the location of 
contains all the text text that should appear ig a COMA ements Oe eon image file. 
ata, and im ages : as a paragraph on xhe WIM est \ed and 
hat are displayed screen. The browser chvat CaN <a grOUP: 
When the HTML Starts a new line 

Ocument is Opened and adds margins 

IN a browser for spacing around 


the paragraph. 


<h1></h1> 
The <h1/h2/h3/h4/h5/h6> 


tags indicate that the text is a header 
<h1> is Usually used for the title 
of the Page, while the others are 
Used to style smaller headings 
on the document. 







<br/> 
The <br/> tag tells the 
browser to start a new line. It 
is a single tag, with the closing 
slash included before the closing 
greater-than sign. 





INDENTING TAGS 


Good programming includes using visual aids to make 
code more readable. One of the easiest ways to improve 
the readability of code is to indent child tags inside their 
parent tags. To help with the indentation, a “Tidy HTML’ 
or “Format HTML’ tool can be used to format the code 
and indent the children tags. 


<!doc type HTML>—— Document type 
declaration 
<html> The header tag 
<head> Opening <title> tag 
<title> </title> 
</head> Closing </title> tag 
< body >——__— The <body> tag 
<p></p> 
</body> 


The outer 
</htm1 >—___ </html> tag 
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Attributes 

Most HTML tags have attributes that 
provide additional information about the 
HTML element. An attribute describes a 
property or characteristic of the element. 
It always appears inside the element’s 
opening tag in a key=“value” format. Some 
attributes may be required by the tag 
type to render correctly, while other 
attributes may be optional. 





<img/> tag attributes 

Apart from “src”, the “width” and “height” 
attributes define the dimensions of an 
image, and the “alt” attribute provides 
an alternative text description for 
images that cannot be displayed. 


<a> tag attributes 

The “href” attribute contains a url that 
points to the hyperlink’s destination, 
and the “target” attribute instructs 
the browser to open the hyperlink in 
a new browser tab or the same tab. 


“id” attribute 
The “id” attribute describes the identity 
of an element. It can be added to any 
kind of tag and is specific to it. This 
attribute can also be used to select 
the element in CSS and JavaScript. 


“name” attribute 
This attribute is used by input elements 
to define the name of the property, or 
characteristic of the element, that is 
sent to the server. This attribute must 
be unique to each element in a form. 


“class” attribute 
The “class” attribute describes the 
name of a group that the element 
is a part of. Many elements on the 
Same page can be members of 
the same class. 


“style” attribute 
The “style” attribute describes the 
visual characteristics of an element. 
It defines a list of key-value pairs. 
Each key-value style definition is 
separated by a semicolon (see p.234). 


HTML forms 
and hyperlinks 


Web pages are connected by hyperlinks and forms. While hyperlinks 
send requests for a specific url, forms send a request that includes 
data from the current web page. This data is then used by the server 
to process the request. 








HTML forms 

An HTML <form> tag contains input elements that 
allow the user to enter data to be sent to the server. 
When a user clicks the submit button, the browser will 
send the values of all the input fields in the form to the 


server. Every input field must have a “name” attribute. 
This identifier is used as the key for the data value. A 
form can include various elements for inputting data, 
including text fields, text areas, labels, checkboxes, 
radio buttons, select drop-down lists, and hidden fields. 


Labels 
The <label> tag adds a text label to an 


input control. When the label is clicked, 


the cursor jumps to the input control. 


The “for” attribute in the <label> tag must 


point to the “id” attribute (see p.211) of 
the input control. 


Checkboxes 
This is used for indicating a true or 
false value. If the checkbox is ticked, 
the browser submits the value in the 
“value” attribute. 


Select drop-down lists 

Select elements allow the user to 
choose an input from a list of possible 
values. This selected value is included 
in the form data sent to the server. 


Radio buttons 

Radio buttons are used to select one 
of a group of possible values. Each 
radio button’s “name” attribute will 
contain the same value. This indicates 
that they are possible answers for the 
same field. 


<Label for="Name">Name:</lLabel> 
<input type="text" id="Name" name="Name" 


placeholder="Enter name" /> 


<input type="checkbox" name="hasDrivingLicense" 


value="true"> Do you have a driving license? 


<select name="city"> 
<option value="delhi">Delhi</option> 
<option value="cairo">Cairo</option> 


</select> 


<input type="radio" name"gender" value="male" 


checked/> Male<br/> 


<input type="radio" name"gender" value="female" 


/> Female 
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Hyperlinks and URLs simply scroll to the required area. In HTML, 
Hyperlinks are text hotspots that, when clicked, hyperlinks are indicated by an anchor <a> tag. 
navigate the browser to a new HTML document. This tag contains an “href” attribute (see p.211) 
They can also refer to another element on the that stores a url. This url is the address to the 
same web page, in which case the browser will new HTML document. 


External hyperlink 


These are hyperlinks to an <a href="http://www.dkp.com/otherPage.html">Link</a> 
HTML document on another 

website. It requires a complete External hyperlinks begin with 

url to navigate. the “http://" prefix 


Text field Input validation 

Text fields are used to enter an alphanumeric Modern browsers use the “type” attribute to help ensure that the 

value. It is placed on a web page using the <input> correct data is entered in a text input field. Since users can easily 

tag. The “placeholder” attribute adds a hint enter an invalid value in the browser, input validation must be 

to the input text field. applied at the server level. Here, the browser will not accept an 
input unless it is in fact an email address. 


<input type="text" name="name" <Label for="email">Email</Label> 
placeholder="Enter name"/> <input name="emailaddress" 


type="email" /> 


Vv 4 65%m_ 


REGISTER Hidden fields 


These fields do not appear on 
screen, but will be included in the 
————_— I data sent to the server when the 


(.Entername i) form is submitted. Here the hidden 
field could be a unique identity 


number assigned to the user. 


iv) Do you! 
driving | Text area 
These are text boxes that can 
accept more than one line of 
input. Text areas are used to input 
data that naturally spans multiple 
lines, such as a paragraph of text 
ora home address. 


4 


a Enter text 


Cairo <textarea rows="5" 
| cols="40">Enter 


text</textarea> 


4 





Build a better website 


A well-built website should be easy to read and navigate through. 
It should be programmed to allow the largest-possible number 

of clients to view it, and should be thoroughly indexed by search 
engines to draw traffic to the site. 


Accessibility these alternative clients. This requires including additional 
Not all clients are web browsers. An HTML document attributes in the HTML tags (see pp.210-—11) and adding 
might also be read on a device that converts text into alternative methods of navigating the site to ensure 

braille for the blind, or reads the text out loud for people _‘ that it can be accessed by users with special needs. 

with a hearing disability. An HTML document can be Programmers should think about the topics mentioned 
programmed to ensure that it is correctly rendered by below to improve the accessibility of their website. 


Readable content 

Ensure there is enough contrast between 
the background and the text colour to 
make the content easy to read. A dark 
coloured font will be easier to read on 

a light background, and vice versa. 


Content organization 

The content of a website should be arranged 
in a logical and intuitive way. There should be 
buttons and hyperlinks to suggest the next 
page the user should visit on their journey 


through the site. Breadcrumb links show the 
user where they are in the context of the 
site and allow them to go back to a previous 
page if necessary. 


Keyboard alternatives 

Some users may prefer using a keyboard 
rather than a mouse, so websites should 
provide for keyboard alternatives for actions, 


such as scrolling, that usually rely on a mouse. 


+ 
+17 





< http://www.traveltheworld.com/home 


Travel w = OQ 


Flights Hotels Cabs 











SI XZ] 


Departure Return 





Text alternatives 

Non-browser clients require text alternatives for non-text items. 

Include an “alt” attribute in an <img/> tag to ensure that such Describes the 
clients can display a text value if they cannot display images. image in text 


<img src="image.jpg" alt="Eiffel Tower"/> 


Semantics 

One of the key concepts in HTML is that the tags, or 
semantic elements, should express the meaning of 
the text, data, and images contained within them. For 
example, it is expected that an <h1> tag contains the 
main page header, a <p> tag contains text that should 
appear in a paragraph style, and a <ul> tag contains 
items that are all part of a list. Using the correct tag 
and tag attributes allows browsers and other types of 
web clients to understand the programmer’s intention 
and correctly render the content in the output format 
for that client, be it as a web page on a screen or a 
ticker tape on a braille terminal. 


WEB TECHNOLOGIES 
Build a better website 
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Specifies the header 

fora document Defines other content, 

such as a sidebar 
Defines the 


navigation links 





Defines the 
sectionina 
document 









Specifies 


independent, 
self-contained 
content 


Specifies the 
footer fora 


eoctiment SEMANTIC ELEMENTS 





Responsive layout 

In the past, when the Web was primarily 
viewed in a browser running on a desktop, 
the width of HTML documents was 
commonly defined by a fixed number 

of pixels. Since many users today view 
websites on a range of devices, such as 
smartphones and tablets, it is necessary 
to code the HTML so that the website can 
fit on any size screen. The ability to stretch 
and shape the HTML to fit different screens 
is known as being “responsive”. 


TABLET PHONE 


Compliance with guidelines 

All the code should comply with the 

Web Content Accessibility Guidelines to 
ensure that users with disabilities are able 
to enjoy the website. More information 
can be found at https:/Awww.w3.org/WAI/ 
standards-guidelines/wcag/ 





Hosting considerations 

Web hosting is a service that makes websites 
accessible over the World Wide Web. Although 
it is possible to host a website from a personal 
computer, it is better to do so from a server 
that is designed to be online 24/7 and can 
provide backup and security to protect the site. 


Shared hosting 

In shared hosting, the web server hosts 
many different websites and databases. 
Each user can rent enough disk space, 
bandwidth, and database access to 
provide hosting for a single website. 


Virtual Private Server (VPS) hosting 
This involves a single server being divided 
into multiple virtual machines. Each 
website being hosted rents a machine, 
which is managed as a standalone server, 
but actually shares resources with all other 
virtual machines on that server. 


Dedicated server 

A single server is used to host the website, 
and there is no sharing of resources. 

The user is responsible for installing and 
configuring all software and security 

on the server. 


Elastic cloud computing 

This system can adapt so that the needs of 
the system match the resources available 
to it. It provides the most functionality and 
flexibility, but comes at a higher cost than 
other hosting options. 





Build a web page 





A modern website is built using more than one programming 
language. In this project you will learn to create a basic web page, 
in this instance a pet store. You will need to combine HTML, CSS, 
and JavaScript, but the project is made up of three parts. First you 
will learn how to build an HTML framework. 


How it works 

The use of elements from HTML, 
CSS, and JavaScript will make 
the website structured, intuitive 
to navigate, and interactive. 


eee Pet Shop 
< file:///PetShop/index.html 


PETSHOP Home About Shop Contact 


ee 


PET SHOP 


SHOP NOW 





LOVE FISH 
THE WIDEST RANGE OF FISHES 


Indoor and outdoor, @ 
we've got them all! © 


CEICK FOR FSi 











Final website 

The website will be the home page of a pet 
supplies retail store. CSS (see pp.242-63) will 

add the visual styles and layout definitions, while 
JavaScript (see pp.288-303) will add interactive 


behaviours to enrich user experience on the page. 


The HTML stage 

You will create all the HTML elements of the web page 
in the first part of this project. This will include all 

the text, information, and data that need to appear 

on the website. 


stant eee Pet Shop 


< file:///PetShop/index. html 





Free shipping 


* Home 

* About 

- Shop 

* Contact 


PET SHOP 
PET SHOP 
SHOP NOW 










LOVE FISH 


i THE WIDEST RANGE OF FISHES 


. Indoor and outdoor, we've got them all! 





2 4 


HTML document 
At the end of the first stage you will see a 


long vertical web page. The HTML file will 
contain the minimum amount of code 
required for a valid website. This file 


PROGRAM DESIGN defines the basic structure of the website. 








>» How to structure a page 4 Time: 
> How to create feature boxes 


2-3 hours 


Lines of code: 
182 
Difficulty level 


>» How to use HTML tags 
and attributes 


Program requirements 

You will need a few programming elements 
to build this website. You may also have to 
download and install certain components 
before you can start writing the code. 


Development environment 
The IDE (see pp.208-209) 
“Microsoft Visual Studio 
Community 2019” will be used in 
this project. It is a free software 
available for both Windows and 
macOS, and supports various 
programming languages. 





Browser 

This project uses the 
Google Chrome browser 
to run and debug the code. 
You are welcome to use a 
different browser if you are 
more comfortable with it. 





Images 

You will need to download 
the images folder from 
www.dk.com/coding-course. A 
copy of this folder is required 
to create the home page of 
the website. You can also use 
your own images if you like. 
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HTML is the backbone of all websites, even the most 
complicated ones. The HTML code used in this project 
can be reused to create different types of web pages. 
Any web browsers can be used to read the HTML 
document as a web page, including Google Chrome, 
Internet Explorer, and Safari. 





Installing an IDE 

To write the code for the website you 

will first need a development environment. Follow 
the steps given below to install “Microsoft Visual 
Studio Community 2019” on your computer. 


Gey DOWNLOAD VISUAL STUDIO 
Open a browser, go to the website mentioned below and 


download the Community edition of Visual Studio. The browser 
will download a .dmg file to the Downloads folder on a Mac. If 
it does not run automatically, go to the folder and double-click 
the file to run it. On a Windows computer, save the installation 
.exe file to your hard drive and then run it. 





www.visualstudio.com/downloads 


(a2 INSTALL COMPONENTS 
T 


he Visual Studio Installer will display a list of languages 
you can program in. This project only requires languages for web 
development, so make sure to select the component .Net Core or 
ASP.net and web development. The installer will then download 
and install the necessary components. 


Visual Studio for Mac 8.1 
Create apps andgames across web, and 

desktop with .NET. Unity, Azure, and Docker 

support is included by default. 


®) .NET Core Ze 
The open source, cross-platform .NET 
framework and runtime. 


MAC 


ASP.NET and web development 
Build web applications using ASP.NET, 


ASP.NET Core, HTML/JavasScript, and 
Containers including Docker support 





WINDOWS 


(4 


(73) OPEN VISUAL STUDIO 
Allow any updates and 


then open Visual Studio. On a Mac, 
you can open Visual Studio by clicking 
its icon in the Applications folder, 
taskbar, or the desktop. To open it in 
Windows, click the icon on the startup 
menu, taskbar, or desktop. 





VISUAL STUDIO 


REMEMBER eee 


HTML, JavaScript, and CSS files are just text files. 
Their code can be written in a simple text editor, 


such as Notepad or TextEdit. However, a dedicated 
development environment, such as Visual Studio, 
offers tools to improve the coding experience. 








Getting started 

After installing an IDE, it is important to get 
the basic elements required for coding the website. 
The next few steps will teach you how to create the 
root folder for the website, as well as the solution 
and index file required for writing the HTML code. 
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Images in the 
website folder 
will appear on 

the web page 
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(au) CREATE ROOT FOLDER 
You will need a folder to hold 


all the files for the website. Use Finder 
to navigate to the “Users/[user account 
name]” folder on a Mac, or use File 
explorer to navigate to the “C" drive on 
a Windows computer. Then right-click 
and choose New Folder to create the 
website folder. Name it “PetShop”. 





(22) GET THE IMAGES FOLDER 
Paste the previously 


downloaded “images” folder (see p.217) 

into the root folder of the website. This 

contains all the images required to 

create the home page. The full path 

to the folder on a Mac should be 
“Users/[user account name]/PetShop/ 

images’, and in Windows it should 

be “C:/PetShop/images”. 
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OPEN A NEW PROJECT 

The next step is to open a website project in Visual and then Blank Solution. In Windows, open the File menu, 
Studio. On a Mac, open Visual Studio, go to the File menu, and select Open, and then select Web Site. Choose the PetShop 
select New Solution. In the Other section, select Miscellaneous _ folder that was created in the previous step. 








Click here to open Select this option to Click here to open a new 
a new project create the project project on Windows 


File Edit View Website Build | Team 








Generic 
Bi New > 
x Open > A Project/Solution... 
Fa Workspace @s Folder... 
1 Genero Froecs 
MAC WINDOWS 
CREATE A SOLUTION FILE ADD AN INDEX FILE 
You now need a solution file to keep track of the Next, add an “index.html” file to the root folder of the 
project preferences. On a Mac, enter the solution name website. In the Solution Explorer, right-click on the project 
“PetShop” in the “Configure your new solution” window, and name “PetShop” and select Add, then select New File ona 
then enter the location of the website folder. Click Create to Mac or Add New Item in Windows. Now choose HTML Page, 
save a file called “PetShop.sIn” to this folder. In Windows, save and name it “index.html”. Visual Studio will add a file called 
the project to create a-sln file. Click the File menu and choose “index.html” to the website folder. 


Save All. This will open a dialogue box to save a file called 


“PetShop.sln”. Save this file in the website folder. , 
Click on the project name 


im] Solution to add the index file 
[ml | 
Build PetShop 
Rebuild PetShop 
Clean PetShop 
Unload 


PETSHOP.SLN View Archive 





Run Item 
start Debugging Item 


dd New Project... 


“VIEW" MENU Add Existing Project... 
TO DISPLAY THE Add Solution Folder 
“SOLUTION EXPLORER’ IF IT _This will add a new file ___ jg 
inside the website folder AGOHIES, 
IS NOT VISIBLE 
2 


ss 









(aa 
i 


The solution file 
tracks the project's 
preferences g NX 













— GETTING STARTED 


2.60 HTML PAGE 
Visual Studio will create the “index.html” file 


with the minimum code required for a valid HTML page. 
If you are using another development environment, 


Document type 
declaration 


<!DOCTYPE htmlL> 
<html> 


type the code shown here into the new index file. 


The “charset” attribute specifies the 

character encoding for the HTML document. A 
character encoding tells the computer how to 
interpret binary data into real characters 


This tag contains all the 
text, data, and images 
visible on the web page 


Outer tag for the 
HTML document 





Structure the 

home page 
In HTML, the home page will be 
a series of horizontal layers one 
above the other. The first layer 
will contain an animated line of 
promotional messages. This will 
be followed by the “Top Menu”, 
a banner with a large picture, 
company logo, and a call-to-action 
button. The next element will be a 
feature box and then a large image. 
More layers repeating this pattern 
of alternating feature boxes and 
large images will be included. The 
layers at the bottom will contain 
contact details, a subscription link, 
hyperlinks, and a copyright notice. 
We will also add a “Scroll to top” 
button to help the user navigate 
back to the top of the page easily. 


<head> 











<meta charset="utf-8" /> 


<title></title> 
</head> 
<body> This tag is a container for the text 


that will appear as the page title 
in the browser 


</body> 
</html> 


O 


Pet Shop 


file:///PetShop/index.html 


This is a line of menu 
items with hyperlinks to 
other pages in the site 





Feature boxes have a short 
description, a picture, and 
a call-to-action link 


Fy FEATURE BOX 1 


This button will help 
the user navigate 





© COPYRIGHT 
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ADD THE WEBSITE NAME 
Before adding the text, ZB > 
images, and data to the page, add head This text will appear 
the website name into the <head> 7 ‘i as the tab title in 
; . a < = - > 
tag by adding the page title definition meta charset="utf-8" / the browser 
into the <title> tag. 











The <head> tag loads the <titlLe>Pet Shop</title> 
metadata before the 
page is displayed ______</head> 


[32 ADD THE FAVICON DEFINITION 
Next, add the favicon <link> tag below the FAVICON Ack 
<title> tag to add the icon for the website. The “href” 
attribute points to the icon file in the images folder The favicon is a small image that appears 
of the website. in the browser tab next to the page title. 
It is a Square image that makes it easier 
for a user to find the tab for the web page 
in a browser. The favicon can have a solid 
or a transparent background, and must 
have a .png or .ico file format. 


<titLe>Pet Shop</title> 
<Link rel="icon" type="image/png" 


href="images/ favicon. png"> 


ee —_ = 
eee © Pet Shop 





This icon has been used in the book 
to split code across two lines 


(3:3) ADDING TEXT 
You can now start adding the text, data, and 


the messages. All the message divs, except the first, must 





images inside the <body> tag. This will make these have a style attribute instructing the browser not to display 
elements visible when the HTML document opens in them. For now we will only show a single promotional 
the browser. To add the promotional messages, add message. JavaScript will be added later to the project to 
an outer <div> tag, followed by the child tags to contain cycle through the promotional messages. 
This tag will contain the elements Child tags are indented under The promotional 
that can be styled as a group the parent “promo” <div> tag messages 
<body> 


<div id="promo" > 
<div>Free shipping</div> 


<div style="display:none;">New toys for puppies</div> 





<div style="display:none;">Buy 5 toys and save 30%</div> 
<div style="display:none;">Same day dispatch</div> 
</div> 


</body> 


(34) VIEW THE PAGE 
Y 


ou can now view this HTML page inside a 
browser. Save the HTML file, then in the Solution 
Explorer window, right-click on “index.html” and 
select “View in Browser”. You can also open a web 
browser and type the url into the address bar. On 
a Windows computer, the url will be “file:///C:/ 
PetShop/index.html”. On Mac, the url will be “file:/// 
Users/[user account name]/PetShop/index.html”. 
You will now be able to view the page title in the 
tab name, the url in the address bar, and the text “Free 
shipping” in the browser window. 


rg - = p—== a ~~ = . 
(@2®@ © Pet shop — 


< file:///C:/PetShop/index.html 


Free shipping 
url to the website 


GOOGLE CHROME BROWSER 


ADD THE TOP MENU SECTION 


DEVELOPER TOOLS 





To see what is happening on an HTML page inside the browser, 
open its Developer tools. The Developer tools allow you to 
select individual HTML elements and see what CSS styles are 
being applied to them. 


KEYBOARD SHORTCUT TO OPEN DEVELOPER TOOLS 


Keyboard shortcut 
macOS 


Keyboard shortcut 
Windows 


Chrome Cmd+Option+) Ctrl+Shift+] 


Opera Cmd+Option+ Ctrl+Shift+! 


Safari Cmd+Option+C n/a 


Internet Explorer n/a FlZ 


Edge n/a Fl2 








Next, it is time to add the Top Menu section. Under 
the “promo” div, add a new div with id ="topMenu”. To make 
the Top Menu run across the full screen with the text inside 
centred on the page, surround it with a “wrap” div. This “wrap” 


class will be defined later in the CSS project “Styling the website” 


to instruct the browser to display the Top Menu in the 

centre of the page. Inside the “topMenu’ div, add a div with 
class="wrap”, and then inside the “wrap” div, add another 

div with id="topLinks”. This div will contain the list of hyperlinks 
in the Top Menu. 


<div style="display:none;">Same day dispatch</div> 


The “class” attribute describes 


<div id="topMenu"> 
<div class="wrap"> 
<div id="topLinks"> 
</div> 

</div> 


</div> 





Closing tag for 


Closing tag for 
the “topMenu’” div 


the “wrap” div “topLinks” div 


Closing tag for the 


the name of a group that the 
element is a member of 


The “id” attribute describes the identity 
of the element, and can be used to select 
the element in CSS and JavaScript 


ag cng Mitte gists 





ADD THE 

HYPERLINK LIST 
Inside the “topLinks” div, add 
an unordered list that will 


...<div id="topLinks"> 





A | EE EEE EEE ere fo ine claicscel hie 
contain the actual hyperlinks in 
the Top Menu for the HTML <li> The <a> anchor tag is used 
pages: Home, About, Shop, to describe a hyperlink 
and Contact. Then add a small 
link, which appears as <a href="/">Home</a> 
the company name, back : ' =e 
to the none e below </li> The <li> tag is placed inside 
the “topLinks” div, add another . SLSUIP: TERS HO IIHS Cea 
anchor tag to contain the <1 7 >—_______ individual item within a list 
name of the website. This will ae 
hyperlink to the home page. <a href="/">About</a> 

</1i> 


The “href” attribute contains the url that 


TIES points to the hyperlink destination 


<a href="/">Shop</a> 


</li> The <li> tag represents a 
list item in an ordered or 
<li> unordered list 





<a href="/">Contact</a> 
</1i> 
</ul> 
</div> 


<a class="Logo" href="/">PET SHOP</a> 


This anchor tag contains 
the name of the website 










© Pet Shop 


< file:///C:/PetShop/index.html 









The Top Menu 
list appears as 
hyperlinks 


Free shipping 









Home 
* About 
Shop 
Contact 


PET SHOP 


View the website 

Save the HTML file and then refresh the page in the 
browser. You will see the promotional message on 
top, with the Top Menu list below it, followed by the 
hyperlink to the home page with the company logo. 


= STRUCTURE THE HOME PAGE 





ADD THE BANNER 





The “topMenu” Add a div with id="banner” inside 
Ne aoc Donner div closing ta the <div> tag with class="wrap” 
section that will contain a large ee 6 i 
company logo and a call-to-action 
button to visit the shopping page. </div> 
This banner image and heading 
should appear centred in the page, <div class="w rap"> 
so it needs to be surrounded by a 
div with class=“wrap”. <div id="banner"> 
<h1 class="Logo">PET SHOP</h1> 
<div id="action"> This contains the 
call-to-action button 
The <h1> tag contains <a href="/ Shop ">SHOP NOW</a> 
the company logo ; 
</div> 
</div> 
</div> 
Closing tag for the This is the hyperlink 
“banner” div to the url “/Shop” 
ADD VERTICAL SPACE 
Below the “banner” div, add </div> 





another div with class="spacer clear v80". 
The “spacer v80" classes will be used in 
Styling the web page (see pp.242-63) 

to define a standard vertical spacer 
between the elements. The “clear” class 
will be used later to instruct the browser 
to add the next element on a new line. 


<div class="clear spacer v80"></div> 


</div> 





Feature box control 

The next step is to add a feature box control 
to advertise the fish department. This feature box 
control can be reused a few more times on the page, 
each time alternating the side of the page that has 
the image and text. 





Feature box structure 

The left half of the feature box will contain 
a heading, subheading, a text description, 

and a link to the category on the website. 

The right half will hold an image. 





V spmige sen LLeee Lae 


USING THE CLASS ATTRIBUTE 

Add this code below the “spacer” div to define the left and 
right columns of the feature box for the fish department. The “class” 
attribute is used instead of the “id” attribute to style the HTML tag 
because the feature box will be used multiple times on the same page. 








<div id="fishFeature" class="feature"> 


<div class="LeftCoLumn" > OEEEEEESSSSSFSFSFSeSFS Phi will contain 
elements for the 
</div> left column 
<div class="ri ghtCol Bae eee eee ee eeeeeeeees This will contain 
elements for the 
</div> right column 
</div> 


DEFINE THE LEFT COLUMN ELEMENTS 

Inside the “leftColumn’” div, add a div class="text” to 
contain the text elements. This code will add the heading, the 
subheading, a horizontal rule, and a description of the feature 
box in the left column. Add a div class="“spacer” to define the 
vertical space between the elements, and then add an anchor 





This text will appear 





h ee as the subheading This icon has been used to 
Fee RODE Ln tO ENE Paar of the feature box split code over two lines 
<div class="LeftCoLumn"> 
<div class="text"> 
This tag contains the _____________<fh},2>LOVE FISH</h2> 
feature box heading 
<div class="SubHeading">THE WIDEST RANGE OF 
FISHES</div> 
cts] eae ya |) 


horizontal rule 
<p>Indoor and outdoor, we’ve 


got them all!</p> 

<div class="Spacer v40"></div> 

<a href="">CLICK FOR FISH</a> 
</div> 


</div> 


This appears as the This text will appear asa 
description text hyperlink to the page 


ES FEATURE BOX CONTROL 





RIGHT COLUMN ELEMENTS 

Now add this code to define the elements for the right column. In the 

“rightColumn” div, add an anchor tag and inside the <a> tag add an <img/> with 
the picture for the fish department. Then, add a vertical spacer that can be reused 
throughout the website to give consistent vertical height between elements. 





<div class="rightColumn"> 





aedae <a class="featureImage" src="/Fish"> 
describes a 
hyperlink <img src="images/fish feature 1.jpg" /> 
Ve 
. The “src” attribute contains 
</div> the url to the image file 


</div> Closing tag for the 
sicttigectintaceaslit This is the name 


<div class="clear Spacer v20"></div> of the picture in 
the images folder 


Adds a vertical space 
between elements 


ADD A NEW DIV 

Below the “spacer” div, add a new div with 
id="fishImage’” and class="middlelmage”. This will contain 
the second image for the fish department, and will appear 
under the main fish feature box. These “middlelmage” 


containers will be used again later in this page. Defines the middle image 
for the fish department 


ee 


<div id="fishImage" class="middleImage"> 











This points to the 


<img src="images/fish_feature_2.jpg" /> eaecnieiecaten 


</div> 


Adds another 
vertical space after 
the middle image 


<div class="Spacer v80"></div> 


</div> —— Closing tag for the “wrap” div 







i= > BE 





WEB TECHNOLOGIES y) ? 6 a ? y) We 
Build a web page 


Advertising the dog category 


It is now time to add a second category to (-;:) 


the website to advertise the dog department. This 
feature box will appear below the fish department, 
and will have the image on the left and all the text 
elements on the right. 
fsa) DOG FEATURE 
To create the dog feature control box, add a div beneath 
the “spacer” div. Inside this new “dogFeature’” div, add the “leftColumn” 
and “rightColumn’” divs with all the text and image elements required 
for the dog department. 





File name of the dog image 
in the images folder 
<div id="dogFeature" class="feature"> 
<div class="LeftColumn"> 
<a class="featureImage"> 
<img src="images/dog feature _1.jpg" /> 
<7 ae 
</div> 
<div class="rightColumn"> 
<div class="text"> 


Heading for the <h2>HAPPY DOGS</h2> 


dog feature box 


This text will appear 
as the subheading 





<div class="SubHeading">EVERYTHING YOUR DOG 
NEEDS</div> 

<hr /> 

<p>Make sure your pooch eats well and feels good 
with our range of doggie treats.</p> 
<div class="Spacer v40"></div> 


<a href="">CLICK FOR DOGS</a> 





</div> 
</div> 
</div> 
The “href” attribute contains This text will appear Description text for 
the url that points to the as a hyperlink for the the dog department 


hyperlink’s destination dog department 





MIDDLE IMAGE 
Below the 
“dogFeature” div, add another 
div with class="clear” to 
start a new line. Then add 
the second image for the 


<div class="cLear"></div> 


<div id="dogImage" class="middleImage"> 


dog feature box. Next, add <img src="images/dog feature 2.jpg" /> 
another vertical spacer under : 
the image. </div> 


<div class="spacer v80"></div> 





Adds a vertical space File name for the 
below the middle image middle image 















Advertising the 
bird category 
The next feature box to be included is 

for the bird department. Similar to the 
fish feature box, this department will 
have the text elements on the left and 
the image on the right. The bird category 
will appear below the dog category on 
the website. 








BIRD FEATURE 
Type the following lines of code below the “spacer” div 
to add another feature box to advertise the bird department. 
This will include the “leftColumn” and “rightColumn” text and 


Defines the feature box control Subheading for the 
image elements for this category. 


for the bird department bird department 





<div id="birdFeature" class="feature"> 





This is the heading 
for the bird 
department 


<div class="LeftCoLumn"> 


<div class="text"> Siaaen 
<h2>BIRDY NUM NUM</h2> 


<div class="SsubHeading">KEEP YOUR BIRDS 
CHIPPER</div> 
<hr /> 


aE IO oo galhe 


Description for the ————_——<p>Yummy snacks and feeders for 
bird department 





every kind of bird.</p> 

<div class="Spacer v40"></div> 

<a href="">CLICK FOR BIRDS</a> 

</div> 
Hyperlink for the 
</div> bird department 
<div class="rightCoLumn"> 
<a class="featureImage" src="/Bird"> 


<img src="images/bird feature.jpg" /> 





</a> 
</div> 
</div> 
Closing tag for the File name for the bird 
right column image in the feature box 
ADD ANOTHER IMAGE 





Now add another “clear” div to start on 
a new line. Next, add the middle image for the 
bird department. Inside the “birdlmage’” div, 


add the <img/> tag with the url to the image. Closing tag for the 


“birdFeature” div 


< / cd £ C3 S —— 


,MaAIiVv@ 


<div class="clLear"></div> 


<div id="birdImage" class="middleImage"> 





<img src="images/bird feeder.jpg" /> File name of the 
io middle image 


</div> 








The bird image is picked up @eaely 
from the main images folder eee © Pet Shop 
and added to the website < file:///C:/PetShop/index.html 


Bird Feature 

















SCROLL TO THE TOP 
Add a button to allow the user to scroll back to “tooltip” to the button so that when a user hovers 
the top of the page. Create a “scrollToTop’ div and then their mouse over the button, a label will appear on 
add a <span> tag inside it with an HTML entity (see p.233) top saying “Scroll to top”. Another vertical spacer is 
indicating the upwards arrow. The “title” attribute adds a added below the button. 
aJdaysesnse Closing tag for the “birdlmage” div 
Defines the Scroll 
<div id="scrollToTop" title="Scroll to top">————_—_— (etop button 
<Span>&uarr; </span> so The cspan> tag contains 
the HTML entity indicating 
</div> the upwards arrow Adds a vertical 
space below the 
ehh) EEE ACELRET ERE T PEEL ETT ooo raha melas 
ADD A CONTACT SECTION 
Add the contact section for the website 


immediately below the “spacer” div from the previous 
step. You can reuse the feature box controls that were 
used to split the page into a left and right column. In 
the left column, you will add the address and other 
contact details. 





Defines the TELEPHONE EMAIL ADDRESS 


contact section 





<div id="contactUs" class="feature"> 


<div class=" leftCol umn"> Defines the elements 
in the left column of 


the feature box 





<div class="text"> 





<h2>CONTACT US</h2> Header for the section 
<hr /> 
ee te iaenien Ra Raae p> 
information appear 
as a paragraph TEL : 012-345-6789 
</p> 
<p> 


EMAIL : <a href="mailto: INFO@PETSHOP. COM" 
class="emai LLink">INFO@PETSHOP.COM</a> 
</p> 


This will appear as the 
email link to the website 


WEB TECHNOLOGIES y) 3 () / ? & {| 
Build a web page 











<p> 
-PET SHOP<br /> ——_ [he <br /> tag tells 
the browser to start 
80 Strand<br /> a new line 
This text will appear 
as the address of London<br /> 
the Pet Shop 
-WC2R ORL 
</p> 
</div> 
</div> 


<div class="rightColumn"> 
</div> 


</div> 





Defines the right 
column of the feature box 


81 ADD A MAP TO THE CONTACT SECTION 
In the right column, you can now embed a map to show the location 


of the Pet Shop. Inside the “rightColumn’” div, add an <iframe> tag with the 
“src” attribute set to the url of the map on Google Maps. The <iframe> tag is 


used to insert content from another web page onto your page. Link to the map 


in Google Maps 


<div class="rightCoLumn"> 





<iframe src="https://www.googLe.com/maps/embed?p 
b=!1m18!1m12!1m3!1d2483 .1688989591494 ! 2d-0.12403078438577886!3d51.510 
117279635615! 2m3!1f0!2fF0!3f0!3m2!111024!21768!4f13.1!3m3!1m2!1s0x4876 
04c97bf47a1d%3A0xaf65b3d1a31e2229!2s80+Strand%2C+London+WC2R+0BP%2C+U 
K!5e0!3m2!1sen!2sza!4v1539340576969" frameborder="0" style="border:0" 
allowfullscreen class="contactMap"></iframe> 

</div> 
</div>———_____ Closing tag for the “contactUs” div 


</div> Closing tag for the “wrap” div 





Add this line to include a 
<div class="clear spacer v80"></div> vertical space after the map 





a ADD THE SUBSCRIBE SECTION 
Next, add the “Subscribe” section for the website. Below = and “method” attributes define where the form gets sent when 


the “spacer” div add the “subscribe” div to make this section run the user clicks the “submit” button. Then inside the <form> tag, 
across the full screen. Inside the “subscribe” div, add a header, a add a text input field to allow the user to enter an email 
form with action="/subscribe” and method="post”. The “action” address, and a button which says “Join Now” 


<div id="subscribe"> 
Header for the 
<h2>SUBSCRIBE TO OUR MAILING LIST</h2>——_ Subscribe section 
<form action="/subscribe" method="post"> 
<input name="email" type="text" placeholder="Enter 
your email address" /> 


<input type="submit" value="Join Now" /> 





</form> Text for the button 


</div> 


ADD THE FOOTER 
Let us now add the “footer” section after the 
“subscribe” </div> closing tag. This will contain the 


unordered list of footer hyperlinks for the website. The "href" attribute describes This will appear as the 
the url of the page to link to first footer hyperlink 








<div id="footer"> 








<ul> 
<li> 
<a href="/storeFinder">Store Finder</a> 
</1i> 
<li> 
<a href="/shipping">Shipping</a> one 
</1i> 
<li> 
<a href="/FAQ">FAQ</a> 
</1i> 
</ul> The <ul> tag is a block element used 





to designate an unordered list 
</div> 


WEB TECHNOLOGIES 3 i 3 3 
Build a web page Z Y; 7 


ADD THE COPYRIGHT NOTICE 

Then add a copyright notice at the bottom of the page. 
This will contain the copyright message and the company logo. 
Notice that in the code below, the company logo is contained 
in a <span> tag so that it can be styled later in Styling the web 
page (see pp.242-63). An HTML entity has also been used for the 
copyright symbol. You have now created the basic framework 
for your web page. Additional pages can also be created to build 
a fully functioning website (see p.303). aS 


g 


<div>&copy; 2020 <span class="Logo">PET SHOP</span> 








® 











eee 
>» 

© 2020 PET SHOP 

Text for the 


copyright message 





<div id="copyright"> 


</div> 
HTML entity for the 


</div> copyright symbol 


</body> 





The company logo 


ENTITIES 


Some characters are not allowed in HTML COMMON ENTITIES 

because they are reserved by HTML, CSS, or Meani  HTMLentity 
; eaning 

JavaScript. So when you want these restricted 

characters to appear on screen, they must be Guomnonvine Rauae 

coded with an HTML entity so that they will render 

correctly in the browser. 


Whitespace/spacebar &nbsp; 
This HTML entity will 
display a © symbol 

Ampersand &amp; 


Percent &percent; 


&copy; DK Books 2020 


Dollar &dollar; 


Copyright &copy; 
Common entities PY"8 py 


Here is a list of some of the most 
commonly used HTML entities. See 
https://dev.w3.org/html5/html-author/ 
charref for a full list. 


Apostrophe &apos; 





Cascading Style Sheets 


Cascading Style Sheets (CSS) define how the contents of an 
HTML file should appear in a web browser. It allows for the 
design of a website to be easily updated by making changes 
to the CSS style definitions. 


Why CSS? way to define the style of single elements, and to share 
Website styling, until 1996, was done inside individual the same styles across multiple elements in an HTML 
HTML tags, making code extremely long and cluttered. document. The client web browser reads the CSS files 
CSS simplified this by separating style from content. and applies the style definition to each element in the 
A CSS file contains a list of rules that provide an easy HTML document. 


Adding CSS styles to 

an HTML document 

A CSS style can be defined in three 
places in an HTML document: in 

an external CSS file, in a <style> tag 
inside the HTML file, and in a “style” 
attribute inside an HTML tag. 

















External CSS file 
When CSS style definitions are contained in a separate CSS file, 
the style definitions can be shared by all the pages in a website. 
Use a <link> tag to reference the sheet in an HTML document. 





The <link> tag instructs the browser to 
<head> import CSS styles from an external file 


<Link rel="stylesheet" type="text/css" 


















Link to the 


href="styles.css"> 
style sheet 


</head> 











Ina <style> tag 
An HTML file can contain CSS definitions inside 
a <style> tag, which is usually placed inside the 
<head> section. These CSS definitions do not 

apply to other pages on the website. 





<head> All <h1> headers 
on this page will 


<style> be blue 


hl { 












Inline CSS 
CSS style definitions can be added inline as an attribute to an 
HTML tag. These inline style attributes will override any styles 
that are set globally in an external CSS file or in a <style> tag. 





Element to color: blue; 


be styled 


<p style="color: red;">Hello world!</p> 





p { 





Only this paragraph 
text will be red 





color: red; 









} 
All paragraph 
</style> text on this 
page will 
</head> be red 





Style options 

CSS can define various aspects 
of an element’s appearance on 
screen, including its placement, 
font, colour, border style, and 


special effects such as animation. 


CSS contains instructions that 
tell the browser how to render 
an HTML element on screen. 

In order to work on all browsers 
CSS expects precise names 

for the properties and values. 
For example, to make an 
HTML element invisible the 
“display” property will have 

the value “none”. 


“Cascading Siyle Sheets AO / AIO 


CSS STYLE OPTIONS 


dispLay:block; 


display: inline; 


display:none; 


font-family: "Times New Roman", 
serif; 


font-weight: bold; 
color: red; 


padding: 10px 12px 15px 30px; 
margin 40px; 


background-color: white; 





The element will appear as 
a block element 





The element will appear as 
an inline element 


The element will not appear 
on the screen 


Specifies the font settings and 
font colour 


Specifies the spacing settings (see p.245) 


Sets the background colour 


How CSS works 


CSS works by selecting a set of HTML elements, and then adding styles 
to all the elements in the set. Every CSS instruction consists of two parts: 
the selector and the style definition. The selector tells the browser which 
elements are to be included in the instruction, while the style definition 


specifies how to display the elements included in the selector. 


CSS instructions 

A CSS instruction contains a 
property and a value that defines 
how that property should be 
styled. These instructions are 
grouped together ina style 
definition. In this example, the 
selector is “body”. The style 
definition is the set of style 
instructions contained in the curly 
brackets. Each style instruction 
has a semicolon at the end. 


PADDING 


body { 
padding: 20px; 


margin: OQ; 


The “padding” property 
has the value “20px” 


background-color: gray; 


font-family: "Open Sans", sans-serif; 


font-size: 16px; 


Specifies the font 
name and font type 


BACKGROUND 
COLOR 





CSS selectors 


A CSS selector tells the browser which HTML elements are 
to be styled. An element must satisfy the selection criteria 

in order to have the style applied to it. Selectors can target 

either a single element or a group of elements. 


Basic selectors 
A CSS selector is a pattern used to identify which HTML 
elements qualify to have the style applied to them. CSS 


GROUPING 


‘ @ Ir =a) ; = fr =a fr J > Cc 
» | om | |= (| | ‘ i at SS) 
®@ io e@ wWiaiaEie WSs EF CZ EF Lew 





selectors allow programmers to target specific HTML 
elements with style sheets. There are three basic selectors MI N IMIZES CODE 
in CSS: the element selector, id selector, and class selector. INA STYLE SH EET 













Element selector 

This is used to target all the HTML <p>This text to be in red</p> 
elements of a certain type. For 

example, all elements inside the HTML 

<p> tag will be coloured red. This text will 


implement the style 
definition applied to 
the <p> tag 


p { 
Selects all sg 
paragraph 
elements 


color: red; 








Class selector 

The dot (.) prefix indicates a class selector. Multiple elements 
in an HTML document can share the same class. A class 
selector is used to target a group of HTML elements that 

all have a certain “class” attribute value. For example, all 
elements that have the class “roundedCorners’ will be styled. 


<div class="roundedCorners"></div> 


HTML | this div will implement the 
“roundedCorner” style definition 


. roundedCorners{ 
border-radi cians 7 Selects all elements 


with the class 
} “roundedCorners’” 





ie 
a 


CSS 








GROUPING SELECTORS eee 


If multiple elements are to have the same style, it is not 
necessary to define them separately. Selectors can be 
grouped together using a comma. All grouped selectors 
will have the same style applied to them. 


<h1>, <h2>, 
and <h3> tags 
are grouped 
and will all 
have a font 
size of 24px 


h1, h2, h3{ 


font-size: 24px; 










Id selector 
This selector is used to target a single HTML 
element with a specified “id” attribute value 
and is indicated with hash (#) prefix. In an 
HTML document, an id should be applied 
to only one element per page. 


<div id="header"></div> 


HTML This div will implement the 
“#theader” style definition 
#header “TTEELLELELLLLELELLLLL - eee 
the single 
. | t 
text-align: center; Sere 

} “header” 

Css 
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Complex selectors 

Selectors can also be combined to 
provide more specific definitions 
based on the relationships between 
the elements. You can combine the 
id, class, or tag type into a complex 
selector definition. 








Child selector 

This selector includes all the 
elements that are children of a 
particular element (see p.210). Use 
the greater than (>) symbol between 
the elements to indicate this selector. 
For example,div > p 


Descendant selector 

Indicated by a space, this defines all 
elements that are descendants of a 
particular element. This is similar to 
the child selector, but will include 
children of the child element. 

For example, div p 


General sibling selector 
Defines all the elements that are 
siblings of a particular element. 
They will all have the same 
parent element. Use the tilde (~) 
symbol to indicate this selector. 
For example, p ~ div 





Next sibling selector 
_ Defines all the elements that are 
WW» siblings of and follow on after 
RABB a particular element. These 
selectors are indicated by a 
plus (+) symbol between them. 
For example, div + p 


Multiple classes selector 

Defines an element that must 
contain all the classes in the 
selector. The absence of a 

space between the class names 
indicates that all classes must 

be present. For example, 
.roundedCorners.featureBox 





Combine id and class selector 
| This defines an element that 
| -*% must contain the id and all 
| a supplied classes. The absence 
Fa+s a of a space between the id and 
; Class name indicates that both 
must be present. For example, 
#mainContent.minHeight 


CSS styling 


CSS style definitions are used to set the background colour, 

font size, font family, borders, and other elements in a web page. 
Styles are said to cascade as they are inherited by child elements 
from the parent elements (the elements they are contained in). 


exN = 


CSS allows programmers to define the colour of elements 
on a website, including background colours, borders, 
and text. The most common colours can be set with a 
text value of the colour name. For example, white, red, 

or blue. All modern browsers support 140 HTML colour 
names. Any other colour value can be described in Hex, 
RGB, or RGBA format. 


HTML COLOUR CODES 
Format Ss Valuesforthecolourblue = 
Text color : blue; 
Hex full color : #O000Off; 
Hex shorthand color : #00f; 
RGB color : rgb(0, 0, 255); 
RGBA color : rgba(0, 0, 255, 1); 


color:rgba(0,0,255, 0.5); 


RGBA format’s alpha channel parameter 
describes the transparency of a colour 





In CSS, font size can be defined in several different ways. 

- Pixels: This defines the size of the font in pixels. The 
number is followed by the letters “px”. 

- Size: Keywords such as “large” or “small” are used to 
define the size of the font. 

- Relative size: Defines a font size relative to the parent 
element’s font size. Uses keywords such as “larger”. 











- Percentage: Defines size relative to the parent 


element’s font size. For example, “200%” implies 
twice the parent font’s size. 


- Em: This method is also relative to the parent 


element’s font size. For example, 2em = 2 x 
parent font-size = 200% 

























CSS HELPS 
MAINTAIN THE 
DESIGN ACROSS 
A WEBSITE 





tial 
‘Border styling 


The CSS border properties 
allow programmers to specify 
the style, width, and colour 
of an element’s border. These 
border styles can be defined 
in several different ways. 
- Define border settings 
in one line 
border: 1px solid black; 
- Define border settings 
in separate lines 
border-width: 1px; 
border-style: solid; 
border-color: black; 
- Define different vertical 
and horizontal borders 
border-width: lpx Opx; 
- Define different width for 
each side of the border 
border-width: 1px Opx 
3px 2px; 


[> 


The “transition” instruction in CSS 
allows programmers to create simple 
animations in modern browsers, such 
as a button changing size or colour 
when a mouse hovers over it. To do this, 
the property to be animated and the 
duration of the animation should be 
specified in the CSS file (see p.250). 
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Cascading styles 

An HTML element can have multiple 
styles applied to it. Many HTML tags 
also inherit properties from the parent 
tags that contain them. The browser 
determines which style to apply based 
on the rules mentioned below. 








Origin 

Browsers have built-in default styles 
that they apply to HTML tags. These are 
known as user-agent styles. However, 
styles defined by the programmer, 
called author styles, will override these 
user-agent styles. 





Importance 

A style instruction that is marked with 
the “limportant” declaration will be 
given priority over other instructions. 
It will always be applied to an element, 
regardless of the placement of the 
instruction in the CSS hierarchy. 





Specificity 

A style that has a more detailed selector 
will be applied before a style that is 

less specific. This means that the greater 
the number of elements in the selector, 

the higher the priority that the style 

will receive. 





Instruction order 
A style that is defined earlier in a CSS 


lo Eo . file will be overridden by a style that is 
== — defined later, and a style that is defined 
eam _in the CSS file will be overridden by 


the styles defined inline by a “style” 
attribute in an HTML tag. 


IMPORTANT eee 


The !important declaration is an easy 

way of instructing the browser to prioritize 
a style definition, but it should only be 
used as a last resort. It is preferable to 


make the selector more specific, by 
including additional classes or id values 
in the selection criteria. CSS will apply 
the definition with the most specific 
selector, avoiding the need to use the 
limportant declaration. 





Responsive layouts 


A responsive website has a design that can adapt to display 
correctly on any size screen, from desktop monitors and 
laptops to smartphones and tablets. This is achieved by 

a clever combination of HTML, CSS, and JavaScript. 





Viewport 

The “viewport” declaration tells a browser that a website has 
a responsive layout. The declaration is placed alongside other 
metadata. The “content” attribute instructs the browser to set 
the page width the same as the screen width. It also sets the 
initial zoom level. These meta instructions allow the page 





elements to adjust to the maximum width of the screen and MU LTl PLE CSS FI LES CAN 
improves the user experience by displaying the correct styling BE LINKED TO AN HTML 
and layout for any screen size. Without these instructions, the 

browser will zoom out to show the whole page, rather than DOCU M ENT TO MAKE A 
allowing the page elements to reshape to the width of the screen. RESPONSIVE WEB PAGE 


<head> 





<meta name="viewport" content="width=device-width, The “content” 
attribute sets 

initial-scale=1.0"> (oe tear ey Propecia 
declaration is placed and the initial 

</head> inside the <head> tag zoom level to 1 


Flexible layouts 


“viewport” declaration 


in a responsive design 


allows the page 
elements to adjust 
to fit the screen size. 


FEATURE BOX 
FEATURE BOX 





Why responsive? 

When the Web was first created, almost all users 
viewed websites on a desktop monitor. Early 
websites were programmed to be viewed at a fixed 
width of 800px. This width was gradually increased 
over the years as the average user’s screen size 
increased. The arrival of browsers on smartphones 


Media query 

Media queries are used to switch between 
different layout styles, depending on the width 

of the page. This is the primary way to create 
responsive web pages that can scale to fit correctly 
on any screen size. For example, in the code below, 


.specials { 


WEB TECHNOLOGIES 
Responsive layouts 
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with narrow screens forced programmers to 
maintain multiple versions of their sites, each 
designed to display correctly on a different size 
of screen. Today, there are many different 
device sizes that can display web pages. The 
solution to this is to have a single flexible 
layout that can adjust to any screen size. 











the background colour of elements in the 
“specials” class will change depending 

on the width of the screen. The default 
background colour is red. If the screen is 
more than 993px wide then the background 
colour will be blue. 


Defines the default 
background colour 
of the “specials” class 





background-color: blue; 


@media screen and (min-width: 993px) 
.specials { 


background-color: red; 


Flexible styles 

Media queries fine-tune 
the CSS styles, so that 
each element looks its 
best on any screen size. 





Sets the minimum 
screen width to 993px 


FEATURE BOX 





FEATURE BOX 


Styling the web page 





In this part of the project, styling will be applied to the framework created 
in HTML. CSS allows programmers to have much better control over the 
layout of their website. The look of the site can be kept consistent by using 
a single style sheet, which makes the maintenance of a website more 
efficient. This also saves time and makes it easy to update the design. 


What the program does 

Use the HTML elements of the web page created in Build a 
web page (see pp.216—33). You will use CSS to select and 
style these HTML elements individually in this second part 
of the project. Each element will be formatted according to 

its role and function, making the web page easier to navigate. 
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; < file:///PetShop/index. html 
0 PET SHOP Home About Shop Contact 


121 


PET SHOP 








SHOP NOW 


LOVE FISH 


THE WIDEST RANGE OF FISHES & 
Indoor and outdoor, 
we've got them all! 
~ CLICK FOR FISH 








Z 
Z 


Styled website 


The long vertical web page from the HTML 
part of this project will now appear styled, 
with clearly defined sections and formatted 


text and images. Adding CSS makes the web 
PROGRAM DESIGN page more visual and individual. 








Project requirements 

To add styling to your web page, 
you will need the HTML file 

and images folder from the first 
part of the project. You can 
continue using Visual Studio as 
the development environment. 


HTML FILE 








IMAGES FOLDER 





DEVELOPMENT 
ENVIRONMENT 


» How to use CSS style sheets Time: 
2-3 hours 


> How to create buttons 


with rollovers Lines of code: 315 


» How to add CSS animations Difficulty level 
and transitions @ 





Setting up 
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CSS is used in all modern websites where visual 
appearance Is important. Using CSS, it is possible 





to give every element of a website a distinct style. 
A well-presented web page will encourage interaction 
with the user and will be easier to navigate as well. 


Before you can start styling the website, it is necessary 


to create a special CSS file to contain the code and link it to the 
HTML file previously created. The following steps will create 


a dedicated “styles” folder and the CSS file inside it. 


fing CREATE A NEW FOLDER 
You will first need to create a new folder in Solution 


The solution folder 


Visual Studio to contain the CSS style sheets. In Windows, named PetShop 


right-click on the project name “PetShop” in Solution 
Explorer. Then, select Add and choose New Folder. Name 
this folder “styles”. The full path to this folder should be 
“C:\PetShop\styles”. 
Ona Mac, open Finder and create a new folder called 

“styles” inside the website folder “PetShop”. The full path 
should be “Users/[user account name]/PetShop/styles”. 
Then, open Visual Studio, right-click on the project name 
“PetShop”, select Add, and then choose Add Solution Folder. 


fiz) ADD A CSS FILE 
The next step is to create a new CSS file inside the 


styles folder. Make sure to name the CSS file “global.css”. In 
Windows, the full path to the CSS file should be “C:\PetShop\ 
styles\global.css”. On a Mac, the full path to the file should 
be “Users/[user account name]/PetShop/styles/global.css”. 
The website folder PetShop should now contain the images 
folder, the styles folder, and the HTML file. 


& 





IMAGES HTML STYLES 





Build PetShop Adds the styles 


Rebuild PetShop folder inside the 
Clean PetShop solution folder 
praoee Add New Project... 

View Archive Add Existing Project... 





Run Item 


start Debugging Item New File... 


(ACE Aca Fites. 


LOCATING FOLDERS eee 


In Windows, if you would like to see where a 
folder has been created from inside Visual 
Studio, go to the “Solution Explorer” window, 
right-click on the folder you want to locate and 
select Open Folder in File Explorer. This will 
open an instance of File Explorer at the location 


of the folder. 


Ona Mac, to see the location of a folder 
from inside Visual Studio, go to the “Solution 
Explorer” window, command-click on the folder 
you would like to locate and select Reveal in 
Finder. This will open an instance of Finder at 
the folder’s location. 





(73) REFERENCE THE CSS FILE . 
It is necessary to link the newly created CSS file to available in Google Fonts. To do this, you will 
the HTML document so that the styles can be applied to all its link the Google Fonts website to “index.html”, and cars 
elements. This reference to “global.css” file must be made using specify the fonts you want to use. The fonts Anton 
a <link> tag within the <head> tag of the “index.html” file. The and Open Sans are used here, but you can pick HTML 
fonts for this web page will be selected from the options any other font you like. 
<head> 


<meta charset="utf-8" /> 
Title to be displayed 
<title>Pet Shop</titlLe>————— in the browser tab 
<Link rel="icon" type="image/png" href="images/favicon.png"> 


<Link href="styles/global.css" rel="stylesheet" /> 





Link to the custom 











<link href="https://fonts.googleapis.com/css?_| “global.css" file 
where all the 
fami ly=Anton|Open+Sans" rel="stylesheet"> | styles are defined 
</head> 


Link to the CSS style sheets 
for the Google fonts 


(14) ADD COMMENTS " 
At the top of the “global.css” style sheet, adda ce 


the website and provide an easy reference. Notice that 





comment with the names of the fonts and the list of colours the “font-family” definition contains the name of the 
to be used in the website. Add this information inside a primary font being employed, and a secondary font 
comment block “/* */". Anything inside a comment block type to use if the first font is not available. You can CSS 
will be ignored by the browser. These comments are only also choose a different colour scheme for your website 
included to help the programmer standardize the style of if you like. 
/* This font will be used 
for headings and other 
font-family: "Anton", cursive; prominent text elements 
font-family: "Open Sans", sans-serif ;———— This font will be used 


for normal paragraph 
text elements 


Text color : #333; 

Dark blue : #345995; 

Light blue : #4392F1; ee eee 
Red - #ND7263D: colours to be used 
Yellow : #EAC435; 

Orange : #F46036; 





* / 
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Styling the page elements 


Now that the CSS file is ready to contain all the style definitions, 


you can start by adding the styles that affect elements throughout the 
page. The next few steps will show you how to do this. 








ei DEFINE THE HEADERS 
Start by defining the “h1” 


body { 


and “h2” headers used throughout 


the website. The styles specified } iain anil 
here will be applied to each instance 

of the two headers. Both headers h h 

will be styled the same, but with a 1, 2 { 


separate font-size definition. ; 
margin: OQ; 


padding: 0; 





The “font-family” property —__ —____font-family: "Anton" 
defines the preferred font 
to use and the fallback font font-weight: normal; 
type in case the preferred 
font is not available } 
hi { 
Only “hl” headers will font-size: 110px; 
have the font size 110px 
h2 { 
Only “h2” headers will ___________+—=—=>sfont-size: 30px; 
have the font size 30px 


Applies the style 
definition to all “hl” 
and “h2” headers on 
the web page 


, Cursive;——___ The headers will 


use the Anton 
cursive font 


MARGIN AND PADDING ee0e 


Margin is the space measured from the 


border, outside of the element. Padding MARGIN STYLES 


is the space measured fromthe border, = | ode Output 


inside the element. There are different ways 
to describe the margin and padding styles. margin: 40px: 


margin: 20px 40px; 


Ppt iar tresses aa x 





| CONTENT 


margin: 10px 20px 30px 40px; 


STRUCTURE OF MARGIN itt nO aete. 
AND PADDING IN A WEBSITE 





40px on top, bottom, 
left and right 


20px on top and bottom 
40px on left and right 


10px on top, 20px on right 
30px on bottom, 40px on left 


0 on top and bottom and equal space on 
the left and right (same as centre align) 


eS STYLING THE PAGE ELEMENTS 






Page elements 

Every website is made up 
of various elements serving 
different purposes. CSS 


can add unique styles to 
every element. 
i SSS SS 


WT 



















PN 








FONT TYPE 


FONT FAMILY 













I 
ll 
7 


FONT WEIGHT 





Ee ADD VERTICAL SPACERS (2.3 ADDING ELEMENTS ON NEW LINES 
Each section of the web page can be separated with Now create a style for “clear”. This is required if the 


white space to make a website easy to follow. These white 
Spaces are created through standardized vertical spacers 
throughout this website. In CSS, you can use compound style 
signatures to associate the required style definitions. 


Compound style 
signature with the 
classes “spacer” 





.spacer.v20 { 


height: 20px; 





and “v20” 
.spacer.v40 { 
height: 40px; The height wil 
be 40px if the 
} tag has both 
“spacer” and 
“v40" classes 


.spacer.v80 { 


height: 80px; 


The height will be 80px 
if the tag has both “spacer’ 
and “v80" classes 


1 





previous element does not have a fixed height or is set to 
float to one side. The “clear” property is used with values 
such as “left”, “right”, or “both”. It prevents floating objects 
from appearing on the specified side of the element to 
which “clear” is applied. 


Selects all the 
elements with 
the class “clear” 


.clear { 


clear: both; 





S— 





This instruction will 
place the next HTML 
element ona new line 


USE MULTIPLE CLASSES 
IN THE HTML TAG 

TO ACHIEVE IMORE 
MEANINGFUL AND 
TARGETED STYLING 
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STYLE THE BODY TAG 
Add the style definitions for body { 
the <body> tag from step 2.1. The style 
signature is “body”. The style definition margin: 0; 
will set the values for the margin, padding, —-—a 
font, background colour, and font colour. padding: 0; No space between 
the browser 
font-family: "Open Sans", eindowen 
the web page 
sans-serif; 

The default font-size: 15 DX; The background 
font size for all colour for the 
eee background-color: white; web page 

web page 
color: #333; Hex code for dark 
grey, the font colour 
} for the body text 





Styling the individual elements 





In this section, you can add styles to the as a horizontal layer, with its own visual style and 
individual HTML elements from the top of the web spacing requirements. Start by adding styles to 
page down to the bottom. Fach section can be seen the first element on the web page — the promo bar. 


(ar) DEFINE STYLE SIGNATURES 
The Promotional Messages, Subscribe, and Footer 


sections share some of the same style definitions. They all 
need to be centre aligned, with white text, and a minimum 
width of 1000px. Add this code below the code added in 
step 2.3 to give all three style signatures the same definition. 


clear: both; 





#promo, 
#subscribe, ———— [heselectors apply the 
same style definition 

#footer { 

text-align: center; 

color: #fff;—————— Hexcode forthe SUBSCRIBE 

colour white 
min-width: 1000px; 


The elements must be 
at least 1000px wide 





= STYLING THE INDIVIDUAL ELEMENTS 


3.2 BACKGROUND COLOUR FOR PROMO (32) ADD PADDING TO THE PROMO DIV 
Next, you will add a background colour to the Add padding around the text in the Promotional 
Promotional Messages section to make it more visible on Messages to introduce some space from the border. The 
the web page. This style only applies to the promo section. style will be applied to all the promotional messages 
contained within the “promo” div. 


#promo { 
background-color: #F46036; 


Selects all <div> 
tags within the 
<promo> tag 


#promo > div { 


padding: 15px; 


Hex code for orange in The space between the <div> 
the colour scheme border and its text content SAVE 
34 VIEW THE PAGE 
View the page by opening a browser and entering the page does not update in the browser when you refresh, the 
url into the address bar. In Windows, the url to the file on your local browser may have cached a previous version of the site. Empty 
computer will be “file:///C:/PetShop/index.html”. On a Mac, the url the browser cache by going to the history settings and selecting 


will be “file:///Users/[user account name]/PetShop/index.html”. Ifthe “Clear browsing data”. This will force the browser to get the latest files. 






© Pet Shop 
file:///PetShop/index.html 





The promotional messages 
will now be displayed with 
the styles applied 


ES DEFINE THE WRAP CLASS 
Add style definitions for the “wrap” class created in 


HTML. Most of the website's information is contained in this 
class. The “wrap” div has a fixed width of 1000px. The horizontal 
margins adjust automatically to keep the <div> in the centre of 
the screen if the screen width is more than 1000px wide. 


color: #333; 








} 


.wWrap (aes Add this after the 
code from step 2.4 





margin: 0 auto; ———— Aligns the 
“wrap” element 
adding: 0: to the centre 
- . of the page 


width: 1000px; 





36 DEFINE THE TOP MENU 
Now add the style definitions for the 
Top Menu section. This panel will run across 
the full screen and will contain the menu items 
and logo. Set a fixed height for the menu 


and add padding in all directions for the list 
of menu items contained in the panel. 


padding: 15px; 
} 


#topMenu {-— Add this after the 
code from step 3.3 
height: 60px; 
} 
#topLinks { 
float: right; 


padding-top: 20px; 


Space between the “topLinks” 
border and the list it contains 


WEB TECHNOLOGIES 
styling the web page 
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DEFINE HORIZONTAL MENU LISTS 

The menu lists in both Top Menu and the Footer are 
horizontal, so you can give them the same style definitions. The 
menu items should align left within their container lists, so that 
they appear in a horizontal line with the first item on the left. 








The two selectors share the 
same style definition 


No bullet points will be 
added to the list items 


#topLinks ul, 
#footer ul { 
list-styLle-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 


} Hides content that 


; overflows the 
#topLinks Li { element's dimensions 


float: Left;— Theelement 
floats to the left 


} of its container 


3.8 STYLE THE HYPERLINKS 
The hyperlinks in the Top Menu will have one style for to make the mouse-over effect smoother. Here, three 


their normal state and a different style for when the mouse is 
hovering over them. The keyword “‘hover” is a pseudo-class and 
instructs the browser to apply that style when the mouse is over 
the element. Add a “transition” instruction in both style definitions 


#topLinks lia { 
color: #333; 
text-align: center; 
padding: 16px; 
text-decoration: 
-webkit-transition: 
-ms-transition: 


transition: 


none aeeseeee 
all 250ms ease-out; 
all 250ms ease-out; 


all 250ms ease-out; 


versions of the “transition” instruction have been included, 
each one intended for a different browser. Including 
multiple instructions for different browsers is not very 
common, but is required occasionally. 


Centre aligns the 
hyperlink contents 


No underline beneath 


the hyperlink Transition effect 


when a mouse moves 
off the hyperlink 





Transition definition 
required by older 
Microsoft browsers, 
such as Internet Explorer 


Transition instruction for 
Google Chrome browser 





#topLinks Li a:hover { 


Hex code for 


color: #4392F1 go] et a Hel ea the colour blue Transition effect 
when a mouse moves 
-webkit-transition: all 250ms ease-out; over the hyperlink 





-ms-transition: all 250ms ease-out; 
Underlines the 


transition: aLl 250ms ease-out; hyperlink when 
a mouse hovers 
text-decoration: underline; over it 








39 STYLE THE LOGO 
TRANSITIONS ds The next step is to style the logo in the Top Menu. The logo is 
used three times on the page (in the Top Menu, the Banner, and the Footer), 


All major web browsers so you can encapsulate the logo font styles in its own class called “logo”. 
use different names for the The small logo in the Top Menu is a hyperlink back to the home page, 


a tee so you will need to define both its normal and hover state. 
transition property, so your 


CSS style definitions must 
include all three versions of the 
“transition” instruction to ensure #topMenu .logo { 

that the transition effect renders float: left: Places the logo 
correctly on the browsers. When ; ; on the left of the 

a browser is implementing the padding-top: 13px; ‘topLinks" element 
CSS style definition, it will ignore 

the instructions intended for font-size: 24px; Sets the font 
other browsers and apply the rare: 
instructions it understands. A color: #333; 

warning message about the 

invalid CSS properties may 

appear, but these can safely } 
be ignored. 








text-decoration: none; 


No underline on 
the logo hyperlink 


This will make the logo 
appear blue when the 
mouse hovers over it 


#topMenu .Llogo:hover { 
color: #4392F1; 


. Logo { 


font-family: "Anton", cursive; 





The default font 
for the logo SAVE 





Styling the web page LOW / ZO] 


VIEW THE WEBSITE 

Save the code and then refresh the page in the 
browser. The Top Menu section will now be laid out with 
the small logo on the left and the hyperlinks on the right. 









The favicon (see p.221) 
and page title appear 
in the browser tab 









gh 
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< file:///PetShop/index. html 


The Top Menu 
appears asa 
Styled logo in the Top ___ horizontal list 
Menu section now Home About Shop Contact———-— of hyperlinks 
has a transition effect \ 


See 
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(3.11) STYLE THE BANNER 
T 


he next section to be styled is the Banner, which will 
contain the name of the website and an image. First, set the styles 
for the “banner” div by defining its width, height, and alignment. 


Link to the background 
It should include a background image as well. 


image for the banner 


#banner { 





background-image: url("../images/banner. jpg") ; 





background-repeat: no-repeat; The background 
image should not 
background-position: center top; repeat vertically 


or horizontally 
width: 100%; 
Centre aligns the 
text-align: center; contents of the banner 





padding-top: 300px; 
color: #333; 


Hex code for Space between the top 
dark grey text border of the banner 
and the text inside 


STYLE THE BANNER LOGO 
Now you can add styles for the logo Selects the “logo” 
ee .; PP Tadd )tbotddbdhbse Bo 

appearing inside the Banner section. In the #banner . logo { elements inside 
HTML document, the logo appearing in s the banner 
the Banner section also has an <h1> tag. So margin-top: 20px; 
this logo will receive style instructions from Space between 
both “h1” and “logo” style definitions. } 


the top border of 
the logo and the 
element above it 





ADD STYLES TO THE HYPERLINK 





The next step is to add styles for the “action” div and 
the “Shop Now” hyperlink. This link style definition will also 
contain the “transition” instructions to animate the change in 
styles between the normal and mouse-over states. 


#banner #action { 
font-weight: bold; 
width: 200px; 





margin: 20px auto O auto; 


#banner #action a { 
-webkit-transition: all 250ms ease-out; 
-ms-transition: all 250ms ease-out; 
transition: all 250ms ease-out; 
padding: 20px; 
color: white; 
text-decoration: none; 


border-radius: 30px; 





background-color: #4392F1; 


#banner #action a:hover { 
-webkit-transition: all 250ms ease-out; 
-ms-transition: all 250ms ease-out; 
transition: all 250ms ease-out; 
background-color: #F46036; 
padding: 20px 40px; 





The horizontal padding will Hex code for the 
increase to 40px when a mouse colour orange 
hovers over the button 


Style definitions 
for the div that 
contains the hyperlink 


Three versions of the 
transition instruction 


Hex code for 
light blue 


Transition effect 
when a mouse 
moves over 

the hyperlink 


SAVE 


w Seving the web pege DOL / LOS 








VIEW THE WEBSITE ——— = —~ 


Refresh and view the page in the 
co ‘e e@ ® Oo Pet Shop | 


browser. You can now see the background 
image in the Banner, and the animated | 
rollover effect on the “Shop Now’ link. | < file:///PetShop/index.html 








PET SHOP Home About Shop Contact 
g, 


ee | 


PET SHOP 





The banner background 
image will be displayed 
above the banner text 








The banner 
call-to-action button 
with transition effect 














Feature box styling are defined as classes and are applied to multiple 
This section will add styles for the “feature elements on the web page. The class definitions 
box” control, which splits the page into a left also allow alternating the position of the images 


column and a right column. The styles forthe control onthe page. 


fay DEFINE THE LEFT COLUMN | DEFINE THE RIGHT COLUMN 
First, you will define the left column of the feature Add the code below to define the right 


box. This will take up half of the space available. By default, column. This definition instructs the browser to 
every new div occupies a new line. However, since this include a margin on the left of the space available, 
element must float left, the next element (the right column) where the left column will sit. 


will appear on the same line. 
Pe Selects all the elements that 


Selects all the elements that have both the “feature” and 
have both the “feature” and “rightColumn” classes 
“leftColumn’” classes 








.feature .leftCoLlumn { .feature .rightCoLumn { 
width: 50%;——— Thewidth of the margin-left: 50%; 
left column is set 
float: left; aevania width: 50%; 
container’s width 
text-align: center; text-align: center; 
Aligns the contents Aligns the contents 
to the centre of the to the centre of the 


left column right column 





STYLE THE NON-PICTURE 





ELEMENTS 
Now set styles to define the non-picture 
side of the feature box. In HTML, you 
used a div with class="text” (see p.225) to 
indicate the non-picture elements. You 
can now define the left and the right text 
columns with the same definition. 


.feature .LeftColumn .text, 


Selectors 








.feature .rightColumn .text {. 
padding: 80px 20px 20px 20px; 
min-height: 260px; 


DEFINE THE NORMAL AND MOUSE-OVER STATE 


for the 
“text” divs 
in the left 
and right 
columns 








. feature 


.LeftCoLumn 


Add this code to define the normal and mouse-over state 
for the hyperlinks that appear in the “text” divs. Similar to the Shop 
Now button that you styled earlier, this will also be styled as a 
button that changes colour when the mouse hovers over it. 


Selectors for the <a> tags 
in the “text” div in the left 
and right columns 


.text a, 


.feature .rightColumn .text a { 


-webkit-transition: 


-ms-transition: 


transition: 


padding: 20px; 


all 250ms ease-out; 


all 250ms ease-out; | 


all 250ms ease-out; 





background-color: #4392F1; 


color: white; 


text-decoration: 


none, 


border-radius: 30px; 


. feature 


. LeftCoLumn 


.text a:hover, 


.feature .rightCoLumn .text a:hover { 


-webkit-transition: 
-ms-transition: 


transition: 


all 250ms ease-out; | 
all 250ms ease-out; 


all 250ms ease-out; 





background-color: #F46036; 


text-decoration: 





none, 


padding: 20px 40px; 


“ease-out” defines 
the speed of the 
transition effect 


Transition effect when 
a mouse moves off 
the hyperlink 


Sets rounded corners 
for the border of 
the hyperlink 


Transition effect when 
a mouse moves over 
the hyperlink 


The text is not 
underlined when 
the mouse hovers 
over the hyperlink 


w Sizing the webpage LO # 200 





DEFINE THE HORIZONTAL RULE 
You will also need to add a style definition .feature hr { 
for the horizontal rule appearing in the feature box. 
This rule will separate the heading of the column bac kg round-color: #333; 


from the text below it. 





height: 1px; 
Sets the colour for the 
horizontal rule to dark grey border: 0 ; 


Sets the width of width: 50px; 
the horizontal rule 





4.6 DEFINE THE IMAGES Selects all <img> tags inside 
Now that you have styled the text b> ib 


columns, it is time to define how the images Bie tear lima eee 


in the “featurelmage’ div will be styled. 
.featureImage img { 





Resizes the image width to width: 500px : 
500px. The height will 


adjust automatically } 





47 VIEW THE STYLE DEFINITIONS P 
Refresh the browser to see the new BROWSER TEST &®e@@ 


style definitions being applied to the web The image will 

page. All the feature boxes will now have appear in the New CSS features are constantly being 
the correct styling, with images alternately right column with added to browsers. However, there is 
appearing on the left and right. the correct width 


no point using these features unless 
you are sure that your website users 
will be able to take advantage of them. 
Old browsers will ignore modern CSS 
instructions and the styling of the 
HTML document will not conform to 
the expected layout. Fortunately, all 
modern browsers accept CSS3, though 
there may be small differences in the 


[ © Pet Shop 


file: ///PetShop/index.html 


LOVE FISH 
THE WIDEST RANGE OF FISHES 


way they process some instructions. 
It is advisable always to test your web 
page in several different browsers to 
find the set of functionality that they 
all have in common. 





Indoor and outdoor, 
we've got them all! 





The call-to-action button will now be 
styled, with transition effect 





(ae) ADD STYLE TO EMAIL HYPERLINK 
In the “index.html” file the “feature” class is used not use the “feature” layout definitions to style the Contact 


only to advertize the three product categories, but also for the Us section, which includes a hyperlink that opens a 
Contact Us section appearing further down. In this step, you will new email in the user’s email program. 


.feature .LeftColumn .text a.emailLink, 
Selects the “emailLink” 


.feature .rightColumn .text a.emailLink { hyperlinks in both the 
left and right columns 

color: white; 
text-decoration: none; 
transition: none; 
padding: 10px; 
border: 0; 
background-color: #4392F1; 


The “:hover” pseudo-class 
selects the hyperlinks when 
a mouse hovers over them 


.feature .LeftColumn .text a.emailLink:hover, 
.feature .rightColumn .text a.emailLink:hover { 
-webkit-transition: all 250ms ease-out; 
-ms-transition: all 250ms ease-out; 

transition: all 250ms ease-out; 


background-color: #F46036; 


Hex code for the 
colour orange 


49° DEFINE MIDDLE IMAGES 
The next section that needs to be defined .middleImage { 


are the images that sit in the middle of the page. 


The “middlelmage” div containers must align their text-align: center ; ——— Aligns the 
contents to the centre of the div, to make them , “middlelmage” 
appear in the middle of the page. The <img> tags } contents to 

should also display the images with a consistent the centre 
maximum width. of the page 

Selects all <img> tags ___________,middleImage img { 
inside divs with the 
“middlelmage” class max-width: 1000px; t; 


SAVE 


v Syingawepace LOO 4 20 / 


A410 VIEW THE IMAGES AN CHECK THE IMAGE STYLING 
Save the code and then refresh the browser You will notice that the other instances of the “feature” 

















in order to see the updated web page. The image will and “middlelmage’ divs are all styled correctly throughout the 
now appear centre aligned on the page, just below page. This is because you defined those styles as classes, so 
the feature box. they can be used multiple times on the same page. —-—a 
| eee | © Pet Shop i : | eee © Pet Shop d 
< file:///PetShop/index.html < file:///PetShop/index.html 


LOVE FISH HAPPY DOGS 


THE WIDEST RANGE OF FISHES rr BS EVERYTHING YOUR DOG NEEDS 
Indoor and outdoor, ae 


welvenet thermal Make sure your pooch 





eats well and feels good with 
res our range of doggie treats. 





iy 


The “fishImage” element The “doglmage” element 
will be centre aligned will be centre aligned 











Styling the remaining elements 

Now that you have defined the styles for the main elements 
of the web page, you can continue adding style definitions for the 
remaining sections. In the next few steps, you will style the scroll 
button, the map, the subscribe section, and the footer. 








STYLE THE 
SCROLL BUTTON #ScCroLl LToTop { 
Now you need to add style 
definitions to the “Scroll to top” display: none ;—————_ The button is 
button. The button should have , invisible when 
50 per cent opacity in its normal state, opacitv: .5: the page opens 
and should display at 100 per cent E WERE 
Opacity when the mouse hovers over background-color: #F46036; ache eal ua eae 


it. The “Scroll to top” button should 
be set to invisible when the page 
opens. The button will be activated 
in the third part of this project, using . ‘ . 
JavaScript (see pp.292-95). color: white; 


width: 26px; 


button to orange 


padding: O 20px; 


Sets the size of the up-arrow 
font-size: 40px;—— textin the button 


line-height: 48px; 
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position: fixed; 


The button stays in ri gh ee | Opx : 
a fixed position in 
the bottom-right bottom: 1 Opx . 
be 9 


corner of the page 


border: lpx solid white 


border-radius: 30px; 


The hover state is ______#scrollToTop:hover { 
active when a 
mouse moves opaci ty: ill ® 


over the button 


-webkit-transition: all 250ms Linear; 


-ms-transition: all 


° 
9 


250ms linear; 


transition: all 250ms Linear; 


cursor: pointer; 





STYLE THE CONTACT US SECTION 

The next section of the page that needs 
styling is Contact Us. The “feature” div has previously 
defined its two columns. The left column contains The map width 
the text elements while the right has an embedded will be 100% 
map from Google Maps. You will need to add an 
instruction to format the map’s “iframe” element 
correctly. Then, save the code and refresh the 
browser to check if the section is displaying correctly. 





of the space 
available in the 
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CONTACT US 


TEL: 012-345-6789 


Pet Shop 

The email 80 Strand 
call-to-action London 

button, styled WC2R ORL 

in step 4.8 


.contactMap { 
width: 100%; 
height: 400px; 


right column } 





A white border 
around the orange 
button makes it 
easier to see 


The cursor is 
displayed as 
a pointer 


SAVE 


A dot on the Google 
map shows the 
exact location of 
the address 


STYLE THE SUBSCRIBE SECTION 





 Stying the web page LOO / LOY 


The next element to be styled is the Subscribe section. This will appear 
below the Contact Us section on the web page. Add this code to set the style 


definitions for the Subscribe panel and the heading appearing inside it. 


#subscribe { 
background-color: #4392F1; 
height: 160px; 
padding-top: 40px; 


#subscribe h2 { 
margin: 15px O 20px 0; 
color: white; 


font-size: 24px; 


font-family: "Open Sans", sans-serif; 


font-weight: bold; 





Hex code for light blue. 





Sets the background colour 
of the Subscribe section 


Distance between the 
text and the top border 
of the Subscribe panel 


Sets the text 
to white 





Specifies the font used 
for the “h2” headers 


54 STYLE THE INPUT FIELD 
The Subscribe section has a text field 


where users can enter their email address. Add 
styles for this text input field to define its size and 
appearance, as well as the style of the placeholder 
text that will appear inside it. 


#subscribe input[type=text] { 
border: 0; 
width: 250px; 
height: 28px; 


font-size: 14px; 





padding: O 10px; 


border-radius: 30px; 


Ensures that 
only text fields 
are selected 


No border around 
the email address 
text input box 


Adds space to 
the sides of the 
text input box 
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SUBSCRIBE TO OUR 
MAILING LIST 


55 STYLE THE SUBSCRIBE BUTTON 
Add the code below to define styles for the 


“subscribe” <input> button and its hover state. The button 
will implement a transition on the “background-color” 
from dark blue to orange when a mouse moves over it, 
and then back to dark blue when the mouse moves off it. 


Selects the input button 
in the “subscribe” div 





#subscribe input[type=submit] { 
border: 0; 


width: 80px; Sets the button 
width to 80px 





height: 30px; 
font-size: 14px; 


background-color: #345995; Hex code for the 


colour dark blue 





color: white; 

border-radius: 30px; 

-webkit-transition: all 500ms ease-out; 

-ms-transition: all 500ms ease-out; Transition 
instructions 

transition: all 500ms ease-out; 

cursor: pointer ;—— The cursor will be 

displayed as a pointer 


} when the mouse is 
over the button 


#subscribe input[type=submit]:hover { 
background-color: #F46036;———______ sd Hex code for orange 
in the colour scheme 
-webkit-transition: all 250ms ease-out; 
-ms-transition: all 250ms ease-out; 


transition: all 250ms ease-out; 





Repeat the transition X 
instructions for the NY 
mouse-over effect 


SAVE 
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VIEW THE WEBSITE 

Save the code and refresh the browser to view 
the updated web page. Ensure that the panel is appearing 
below the Contact Us section and rendering correctly. 








© Pet Shop 
The text is : 
aligned to the file:///PetShop/index.html 


centre of the 








left column CONTACT US CO . 
TEL: 012-345-6789 VW 


Pet Shop as y ° 
80 Strand 
London @ ° 
WC2R ORL , f | ow 1 a. The button with 
A placeholder rounded borders 
text hint inside SUBSCRIBE TO OUR MAILING LIST and transition 


the email text effect will be 


input box Enter your email address —— JoinNow displayed 








57 STYLE THE FOOTER 
You can now style the footer for the web 


page. Start by adding styles for the “footer” div, #footer { 
and then add styles for the unordered list and the 
list items containing the links. background-color: #F46036; 
Setsafixed ___-_S—SS—SSC—CC HQ] ght : 80px i 
height for the 
Footer section } 


#footer ul { 





Does not show list-style-type: none; 
bullet points in the 
unordered list margin: 28px 000; 


No space between ___________________padding: 0; 


the list border and 





the list items overflow: hidden; 
Displays as an inline-block di spl ay: 1 nLine-bLock; 
element to allow padding 
and margin } 


#footer li { 


Places the listitems __________+_+—ssss float: left; 
next to one another 


from the left } 





ie STYLING THE REMAINING ELEMENTS 


(5.8) ADD STYLES TO THE FOOTER HYPERLINKS 
Next, you will need to add styles for the hyperlinks that 


appear within the Footer section. When the mouse hovers over 
them, the colour of the text will change from white to black. 


Styles will be applied to all 
anchor tags that are inside list 
items within the “footer” div 


#footer lia { 
color: white; 
text-align: center; 


padding: 20px; 





text-decoration: none; 
font-size: 18px; 
-webkit-transition: all 250ms Linear; 
-ms-transition: all 250ms linear; 


transition: all 250ms Linear; 


#footer li a:hover { 


color: #333; 





-webkit-transition: all 250ms Linear; 


-ms-transition: all 250ms Linear; 


transition: all 250ms Linear; 


The footer 
hyperlink text will 
appear in white 


The hyperlink text will 
not be underlined 


The text colour 
of the footer 
hyperlink will 
change to 
dark grey 
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STYLE THE COPYRIGHT SECTION 
The last element to style is the Copyright section. 








In this step you will add styles for the “copyright” div and the logo Aligns the “copyright” 
it contains. Add this code and then refresh the browser to check eontenieto the centre 
if the Footer and Copyright sections are displaying correctly. of the page 


Selects the tag 





#copyright { 











with the id 
nue text-align: center; 
background-color: #345995; 
color: white; The “copyright” text 
will appear in white 
height: 40px; 
padding-top: 18px ;——-W——____ Space between the 
top border of the 
font-size: 1 6px : “copyright” section 
and its text 
Selects the tag with 
class “logo” inside the 
#copyright .logo { tag with id “copyright” 
Overrides the font-family: "Open Sans", sans-serif; 
default style 
definiton for font-weight: bold; be 
“logo” with a JL 
sans-serif font } a 
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SUBSCRIBE TO OUR MAILING LIST 


Enter your email address —— JoinNow 





The copyright text appears in the 
centre of the page with an HTML 
entity for the copyright symbol 


What is JavaScript? 


JavaScript is one of the most popular modern programming 
languages for the Web. It is an object-oriented language 
that is used to enhance HTML pages by adding dynamic 
and interactive elements to websites. Programs written 

in JavaScript are called scripts. 


Why JavaScript? a cross-platform run time environment like Node.js 
Javascript was invented to implement client-side (see p.284) to run scripts outside of the browser. This 
behaviour in web browsers. Today, however, it is allows for a wide variety of server-side applications, 
used in many kinds of software and server-side such as generating dynamic HTML pages and sending 
web applications. For example, developers can use responses from a Node web server. 





Using JavaScript online The program within a browser that executes a 

All modern web browsers can read and run JavaScript script is called the JavaScript Engine. This engine 
when rendering an HTML page. JavaScript code is is an interpreter that first reads the script and 
interpreted and run by the browser in real time, and converts it into machine code, and then executes 

does not need to be compiled before it is executed. the machine code. 

On an HTML page ; 
To use JavaScript on an HTML page, simply <script type="text/javascript"> pear 
enclose the script in a <script> tag. This tag ASerCHOn) 
can be placed either within the <head> tag or var x = "hello world"; must be inside 
the <body> tag, depending on when the script asschipt>tag 
is run - before, during, or after the HTML. </script> 


The closing </script> tag 


On an external file 
JavaScript can also be placed in an externalfile <script src="CustomScript.js"></script> 
and referenced with an “src” attribute in the 
<script> tag. The external JavaScript file does 
not need to include the <script> tag as this The “src” attribute 
has already been declared in the calling file. points to an external 
JavaScript file 


eee plpmlniis 


AND FEEDBACK 











The language currently known as JavaScript was created IMPROVES USER 
by Brendan Eich for the Netscape browser. It was called oo 


Mocha during the development stage. When it was exe n — 
released, Netscape changed the name of the scripting AND at | 

language to LiveScript, renaming it JavaScript within - 
the first year. EFFECTI “1 y E /E 


THROUGH A WE BS ITE 





Features of JavaScript 

Javascript allows programmers to perform calculations, 
validate user input, and manipulate and inject HTML 
elements on the page. It also has a vast library of 
advanced features that can be easily imported and 





Dedicated code editor 
JavaScript can be written into 
any standard text file, but it is 

much easier to use a dedicated 
code editor to work with it. 
There are several code editors 
(see pp.208-209) that can 
be used to do this. 
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employed in customized scripts. Even though 
JavaScript is a flexible language, there are limits 
to what the JavaScript Engine can do in the 
browser. For example, it cannot write files to the 
hard drive or run programs outside the browser. 











mh 


Document Object Model 
The Document Object Model 
(DOM) is a programming interface 
for HTML documents. It structures 
a web page so that programmers 
can easily access and manipulate 
elements on the page. JavaScript 
can add, edit, or delete elements in 
an HTML document by interacting 
with the DOM. 














Web browser 
While all modern browsers can 
execute JavaScript, each browser 
implements the language slightly 
differently. This is why 
programmers use libraries such 
as JQuery (see p.284) to code 
instructions that will be correctly 
implemented on every browser. 





Community sharing 
Programmers can share their 
projects through online 
communities or by adding to 
JavaScript’s existing libraries. 
There are several code-sharing 
websites available online, 
such as Dabblet, JSFiddle, 
Codeshare, and Github Gist. 


Variables and 
data types 


Variables are containers that store data. When JavaScript 
code runs, these variables can be compared and manipulated. 
A variable can contain different types of data, and logical 
operations (see pp.270-71) should only be performed with 
variables of the same data type. 





Primitive data types 

A primitive data type is a simple data value that is not an 
object or a method. There are three main primitive data 
types in JavaScript — numbers, Booleans, and strings. Data 
types do not need to be explicitly stated at the time of 
declaring a variable (see right); JavaScript automatically 
infers them from the code. 
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var isThisGold = true 


var price = 250; 





Declaring variables 

It is important to declare and 
initialize a variable before 

it can be used in a script. 
Initialization means to assign 

a value to the variable. It allows 
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Declares the variable LastName 
and sets its value to Smith 





var LastName = "Smith"; 


var fullName firstName + " " + LastName; 





var firstName = "John"; 


console. log (fullName) ; 


JavaScript to determine the data 


type that the variable contains 
and access its value. A variable 
should only be declared once 


in a program. 


string.length 
Returns the number 
of characters in 
a string, starting from 
1. It can be used 
by adding .length 
after the name 
of the string. 





Strings 


Strings are data types that can store a series of characters 


Finds the position of 
a string segment within 
another string. It gives the 
index position of the first 


The variable 
firstName is used 
before it is declared 


Incorrect declaration 

In this example, the variable FirstName is 
used before it is declared in the code. Since its 
value is unclear at the time of use, the output 
displayed will be “undefined Smith”. 


string.slice() 
Extracts part of a 
String. It takes two 
parameters, the start 
and end index positions 
(beginning at 0), and 
returns the string 
segment between 
them. 


string.split() 
Divides a string into 
an array of substrings. 
For example, if “a” is the 
input parameter, new 
substrings will be formed 
at every instance of 
string. the letter “a”. 
indexOf() 


string. 
substr() 

Returns a string 
segment where the 
first input parameter is 
the start position and the 
second is the length of 
the segment. 


character of the 
segment, starting 
from 0. 


~“ 


var myString = "Hello world"; 


or numbers. They have a number of useful properties and 


methods that are described above. 


Concatenating strings 
As in other programming 
languages, strings in 
JavaScript can be joined 
together by using the 
plus (+) symbol. However, 
a better way to join, or 
concatenate, strings is by 
using the template literal 
notation (~). This format 
is easier to read and 
maintain than using 

the plus symbol. 


String values always have 
quotation marks around them 


var myBook = { 


titleisa 
string value 





title: "Great Expectations", 


5 w TT 
format: paperback ’ Template literals are enclosed 


within back-tick characters 
’ instead of quotation marks 


var myBookDetails = “Title: ${myBook.title} 





Format: ${myBook. format}; 


Template literals can contain 
placeholders, indicated by the 


console. log (myBookDetai l AWE dollar sign and curly brackets 


= NON-PRIMITIVE DATA TYPES 


Non-primitive data types 

Primitive data types in JavaScript can be grouped together to form 
composite data types. These non-primitive data types help organize 
variables into meaningful data structures that facilitate effective 
processing of the data. They are also called “reference variables”, 
because they give the location of where the data is stored. 


Arrays 

An array is a single variable that 
contains a list of values. These may 

be strings, numbers, and even objects. 
Each array item can be accessed by 

its index position. Similar to strings, 
the index of the first item in an array 

is 0, the second is 1, and so on. 


This array contains 
three strings 


Sorting items in an array 

Arrays contain a method called sort that 
arranges the items of an array in alphabetical 
order. This method, however, does not order 
numbers correctly. To sort numbers, you need to 
add a comparison function to the sort method. 
For example, array.sort(compareFunction) 


A JavaScript array value 
is always surrounded 
by square brackets 


var jewellery = ["Locket", "Earring", "Ring"] ; 


Index value of 
Earring is 1 


iy YY & 





Array length 

The length of an array returns the 

number of items in the array. As in 
strings, the length of an array also 
starts from 1, and not from 0. 











Array index 
The value of an item in an array can be 
obtained by its index, using the syntax 
value = array[index]. To update 
an array item by its index use the 

syntax array[index] =newValue 


SPREAD SYNTAX 


The push method adds items to an array one at a time. To 


add all the items in one go, use the spread syntax (...). Not 
only does this allow multiple new items to be added all at 
once, it is also possible to decide whether these should be 
added before or after the existing array items. 















Adding items to an Array 
Items can be added to 

an existing array using the 
push method. Though it 

is possible to add an item to 
an array by directly calling 
the array index, it is easier 
to use the push method. 


Looping through an Array 
It is possible to access all the items 
in an array by using a for loop 
(see p.274). The loop counter 
loops over every item in 

the array, starting from 0 

to the number of items in 
the array. 





WEB TECHNOLOGIES Y; 6 Q / ? 6 QO 
Variables and data types 


VARIABLE SCOPE 


Declares firstName firstName and LastName 
with a global scope are available inside the 
function because they 
have global scope 


The scope of a variable describes 
where in the code the variable can be 
accessed from. JavaScript has only two 
kinds of scope - local variables and 
global variables. Local variables are var firstName = "John"; 
declared in a function and can only 

be accessed from within that function. var LastName = "Smith"; 
Global variables are declared outside ; 

a function and have a global scope. function getFullName() { 
They can be accessed from anywhere 
in the HTML document. 





var result = firstName + 
" " + LastName; 


return result; 
Global variable 
In this example, the variable FirstName } 
is declared before the function and has 


global scope. It can be accessed from console. Log(getFullName () ) ; 
inside a function as well as outside of it. 





JavaScript objects 

A JavaScript object is a variable that has a set of properties 
made up of primitive data types. This way of packaging data 
is known as the Json data format. This format has become 
the primary format for packaging and transmitting data in 


web applications as it is easy to use and process. Scivareper sie 


separated by acomma 


The list of properties 
is surrounded by 
curly brackets 


Var person = 


{ 








firstName: "John", 
LastName: "Smith", — The property key 
and value are 
age: Ben separated by a colon 
hasDrivingLicense: true, 
education: [ 
"Primary School’, 
"High School" ; If the value isa 
string, it must be 


"BA Deg ree" surrounded by 
quotation marks 





] _ sdf the value is an array, 
it must be surrounded 
} by square brackets 








Logic and 
branching 


Logic is concerned with determining whether a statement is 
true or false. JavaScript uses logical statements to determine 
if a variable satisfies a certain condition and then makes 
decisions based on whether the statement is true or false. 





Boolean values 

A Boolean data type only has two 
possible values: true or false. This 
means that a logical statement will 
always return one of the two Boolean 
values. These values allow an algorithm 
to execute a particular branch of code to 
produce a desired outcome. 


COMPARING VALUES |OOU 


Comparison operators are used in 
conditional statements. They compare 
different values to decide if a statement 
is true or false. 


Logical operators 
Logical operators combine multiple boolean values into a 
single Boolean result. The most common logical operators are 
“And”, “Or”, and “Not”. The “And” operator (&&) demands that 
both Boolean values are true. The “Or” operator (||) demands 
that any of the Boolean values are true. The “Not” operator (!) 
swaps the Boolean value, so true becomes false and false 
becomes true. For example, “variablel && !variable2” means, 
“Is variablel true And variable2 false? If so return true.” 


COMPARISON OPERATORS 
Meaning 


is equal value 


is equal value and 
data type 


is not equal value 


is not equal value 
or data type 


is greater than 


is greater than 
or equal to 


AND OR 


is less than 


is less than or 
equal to 





Burger AND fries. Both the 
statements must be true for 
the logical statement to 
return a true value. 


Meall OR Meal2. One of 
the statements must be true 
for the logical statement to 
return a true value. 





Branching in JavaScript 

The most commonly used conditional statement 

is the if-then branching statement. This statement 
instructs the program to execute a block of code 
only if a logical condition is true. A program (or 
algorithm) is really a sequence of conditional logical 
steps that are designed to transform a given input 
into a desired output. More steps can be added 

to the conditional logic by using if-then-else and 
else-if branching statements. 













NOT 
Burger and NOT onion or 

tomato. Reverses the logical 
state, so true becomes false 
and false becomes true. 
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if (amount >= 30) { 
payment = "Card"; 





} 
if-then If the amount is 
The if statement is used to specify greater than or 
a block of JavaScript code to be equal to 30, it is 
executed if a condition is true. paid by card 


if (amount >= 30) { 
payment = "Card"; 


} else { 
payment = "Cash"; 
if-then-else If the amount is 
The else statement tells the less than 30, it 
JavaScript engine to perform an is paid in cash 


action if the condition is false. 





SWITCH 


A better way to express complex conditional logic 
is to use the switch statement. A single switch 
statement can replace multiple else-if statements. 
Each possible state is represented by a case, and if 
none of the cases match the condition statement, 
then a default code block will execute. Each code 
block is separated by a break statement. 
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Input and output 


One of the best features of the Web is that it is interactive. 
Using JavaScript, it is possible to program a web page to 
output information to the user in different forms, as well 
as to accept input from the user in various ways. 


An alert box can be created Thevalue of the variable 
inside a <script> tag to display in the alert box 


<script> 


var name = "Alice"; 
alert (name) ; 


</script> 


The alert method 
displays an alert box 


Show a modal alert box 
An alert box is a modal window that opens above the 
normal browser window with a message. Users cannot 
continue until they dismiss the alert box. 


User input 


There are several ways to capture user input and work with the data 
in JavaScript. The choice of input method depends on the degree 

of urgency involved in entering the data, whether the input fields 
need to conform to the visual style of the page, or whether the user 


must answer the questions in a specific order. 


Prompt a 
A prompt is a modal message eee 
box that asks the user fora 
single line of input. The user 
must answer the question 
before doing anything else 
in the browser. Prompts are 
helpful in cases where the | 
user must answer questions 
urgently or in a specific order. 


This page says 





Please enter your first name 


cance | RD 





<div id="name"> 
The document object can be 
<scri pt> accessed inside a <script> tag 
The value of 
the variable 
, towrite to 
? the screen 


var name = "Alice"; 
document.write (name) 
</script> 
</div> 


The document.write method 
inserts text into the HTML 


Insert data into the HTML output 
This allows programmers to execute JavaScript and 
output some data into the HTML at the exact location 
where they want the output to appear on screen. 





Output data on screen 

There are four different ways for JavaScript to 

display data back to the screen. The choice of method 
to employ is based on the type of information being 
displayed and whether the output is meant for the 
developer or the end user. For example, an urgent 


The value of the 
variable to display in 
the console log 


The console log can 
be accessed inside 
a <script> tag 


<script> 





var name "Alice"; 
consoLe. Log (name) ; 


</script> 





The console. Log method 
adds a message to the console 


Show data in the console 
Information can be output to the JavaScript console log. 
These log messages are very useful when debugging to 
see what is happening during the execution of the code. 


Confirmation box 

A confirmation box is a modal 
dialogue box that is used to 
verify a user's intention. 

Users are forced to interact 
with the confirmation box 
before they can return to 

the main page. 


HTML Input 

An HTML <form> tag 

(see p.212) is usually used 
to send information entered 
into the input fields back 

to the server. However, it 

is also possible to use this 
data in JavaScript code. For 
example, using HTML input 
controls to get a user's first 
name and last name. 
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alert or question should be displayed in 

a modal window because users must 
acknowledge it before they can proceed. 
Debugging information, on the other hand, 
is intended for the developer and should be 
displayed in the JavaScript console log. 








<div id="name"></div> 


The value of the 
variable to insert 
into the HTML 


<script> 


var name = "Alice"; 


document. getELlementById ("name") . 


innerHTML name; 


</script> 


Set the innerHTML property of the 
HTML element to insert the text 


Insert data into an HTML element 
Allows output to be calculated during the execution 
of a script, and then inserted into the correct location 
via a placeholder HTML element. 


@ | 
\ e@ 


This page says 


Are you enjoying JavaScript? 
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This page says 
Hello John Smith 


cance! | SR 
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For loop 


A for loop will repeat a for (let loopCounter = 0; loopCounter < 5; 





i] 
block of code and each LoopCounter++) { a 
time increment a counter The logical 
until the counter no longer console. log (lLoopCounter) ; condition appears 


ves ie before the | 
satisfies a given condition. efore the loop 


With each increment, the 





counter can increase or For loop with positive increments 
decrease, allowing the The LoopCounter is increased by Displays the value of the 
1 each time the loop repeats the block LoopCounter variable 
loop to run from top to of code. The loop will stop when in the console log 
bottom, or vice versa. LoopCounter equals 5. . 
i 

While loop “ 
A while loop will repeat a block of code until a condition Using while loops e 
returns false. This is similar to the do while loop, This loop is ideal when an instruction a 

~ f Reblnceoreod must repeat an unknown number of times. sh 
except that the condition runs before the block of code, However, depending on the condition, the | 
so it might not run the first time. loop may not qualify to execute even once. X 


r 4 


var numberOfDaysCounter = 0; 


he 


var numberOfDays = 3; 
var daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", 
"Friday", "Saturday", "Sunday"]; 


while (numberOfDaysCounter < numberOfDays) {———— The logical condition 
defines when the loop is 


console. Log (daysOfWeek[numberOfDaysCounter]); = ©ecuted. Here it will run 
if the counter is smaller 


numberOfDaysCounter++; than the number of days 





Loops in JavaScript 


In programming, instructions may often need to be repeated a 
certain number of times or until a condition has been met. Loops 
allow us to control how many times a set of instructions should 
be repeated. There are several different kinds of loops, and each 
% loop has it own way of knowing when to stop. 





cae 
Ces 








For in loop 
A for in loop repeats a block of code for each property Looping through arrays 
of an object. Inside the loop instruction, a variable is This sie tlic ee 
; F arrays OT Gata. e€ code DIOCK WI 
declared that will hold the value of the property as it process each item in the array and 
is being processed by the loop. stop when there are no more items. 
var myBook = { The myBook variable has three 
properties: name, number OfPages, 
name: "Great Expectations", and format 


numberOfPages: 250, 


The format property has 
format: "paperback" ——————____ a string value “paperback” 


} The property variable 


[ 
for (let p rope rty in myBoo k) { represents the current property 
being processed by the loop 


console.log( ${property} ${myBook[property] }°) 













= fez 
Say i 
™ = 

Do while loop 
Similar to a while loop, a do while loop will also repeat a Using do while loops 
block of code until a condition returns false. However, the This loop is used when the block 

st of code must repeat an unknown 
condition appears after the block of code and will only be number of times, but it must be 
checked after the code block has run the first time. executed at least once. 


var numberOfDaysCounter = 0; 
The condition may depend 
var numberOfDays SaBE on the state of variables 


outside of the loop 


var daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", 
"Friday", "Saturday", "Sunday"]; 
do { 

console. Log (daysOfWeek [numberOfDaysCounter]) ; | 


| —s« The block of code 


numberOfDaysCounter++; | will run before the 
condition is checked 





} while (numberOfDaysCounter < numberOfDays) 





=e NESTED LOOPS 


Nested loops Using nested loops 
Loops can be nested, or contained, within other In this example, arrays represent the days of the week 
loops. This allows us to iterate sequentially and temperature readings taken during that day. 

; ve Nested loops are used to find the highest temperature. 
through all the items in a list or multidimensional The outer loop represents the days of the week, while 
array (an array containing one or more arrays). the inner loop represents the data for each day. 


@. Var daysAndTemperature = [ 
4 ["Monday", 26,21,24], | 
Each array has a different 


["Tuesday" j 24] ; number of items 


["Wednesday", 28,21],_ 





The outerCounter loop 
] : iterates through each day 


var maxTemperature = QO; 


for (let outerCounter = 0; outerCounter < daysAndTemperature. 





length; outerCounter++) { 


for (let innerCounter = 0; innerCounter < daysAndTemperature 





[outerCounter].length; innerCounter++) { 


var innerValue = daysAndTemperature[outerCounter] 
| 





[innerCounter] ; 
innerVaLue will represent each array item inside 


if Ci SNaN Ci nnerVal ue) ) { daysAndTemperature[outerCounter] 














y 
a ~ conti nue; If innerVaLue is not anumber the The innerCounter 
code jumps to, the next iteration loop iterates through 
} else { of the innerCounter loop the data for each day 
if (maxTemperature < innerValue) { 
maxTemperature = innerVaLue; 
& 
Fg } This variable will hold the highest 
, value found in the array items 


} 


console. log( Max Temperature ${maxTemperature} ) ; 


Displays the value of the highest 
temperature in the console log 
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Escaping loops required, you can use the continue 
Sometimes the current iteration of the loop is not command to stop the current iteration of 
worth running, or programmers may have already the loop and begin the next iteration. The 
found the answer they were looking for. To avoid break command can be used to stop 
wasting time processing loops that are not running the loop altogether. 
Break 
The break statement var days = ["Monday", "Tuesday", "Wednesday", "Thursday"] ; — 
tells the JavaScript & 
Engine to stop running var whenIsWednesday = function (days) {—— [hisfunction will return 
the loop and jump the index of the array item that Y 
to the next instruction let result = null; matches the string Wednesday 
after the loop. This 
is useful as once the for (let i = 0; i < 7; i++) {————___ Eachtime the loop iterates, the 
loop has found what i counter will increase by 1 
it is looking for, it can : a " 
ie if (days[i] === "Wednesday") { 
move on with the rest ageseiis i Checks if the value of the 
of the program. resuLt = i+13; array item is equivalent to 
the string Wednesday 
break ; Array indexes always start from f 
0, so often you need to add 1 to 
} get a “human friendly” result y 
} Returns the value of the ? 
result variable after 
return result ; ________ the loop has been completed aad 





}; 
console. log( Wednesday is day ${whenIsWednesday (days) } ); 


Displays the result of the 
function in the console log; 
in this case the result is 
Wednesday is day 3 


Continue 
This statement tells for (let i = 0; i < 7; i++) { 
a loop to stop the 

current iteration and if (days[i] !== "Wednesday") { 

start running the next The whenIsWednesday 
iteration. This is useful continue; function using continue 
when you know that rather than break 

the current iteration } 

does not need to be 

executed, and you result = i 
can carry on with the 

next iteration through 

the loop. 











Functions in 
JavaScript 


A function is a block of instructions that performs a task. The 

code inside the function usually only executes when the function 

is called. To use a function, it must first be defined somewhere 

in the scope (local or global) from which it needs to be called. inpirtparamerdte 


are declared 

in parentheses. 
There are none 
in this example 


var firstName = "John"; 


function getFirstName() { 
(______________ 





return orcas 
e 


} Code to b 
executed 


console. Log (getFirstName () ) ; 


Function statement vs function expression 

In JavaScript, a function will behave differently depending on 

how it was declared. Function statements can be called before 

the function has been declared, while function expressions Input parameters for the 











must be declared before they can be used. functioneeeeurlName® 
Function statement | 3 
A function statement function getFulLName(firstName, LastName) { 
begins with the word 
“function” followed by return ‘${firstName} ${lLastName} - ; 
the function name, the 
input parameters, and } eee The template literal notation 
then the code block in ~${variable} returns a 
curly brackets. console. log (getFulLName("John", "Smith")) ; string with the variable value 
embedded in place 
Function expression 
A function expression var fullName = function getFullName(firstName, LastName) { 
begins with a variable 
declaration and then return ‘${firstName} ${lastName} - ; 
assigns a function to 
the variable. } Variable declaration 


console. Log (fulLName("John","Smith")) ; 
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Nested functions A function expression A nested function expression 
‘ : declaration declared inside the car function 
It is also possible to nest a 
function within another function. . 
The inner function, however, var car = function (carName) { ay 
can only be called by its outer var getCa rName = function @) 1 
function. The inner function can 
use variables from the outer return carName; 
function, but the outer function } 
cannot use the variables of the 
inner function. return getCarName () ; 


} 
Why use nested functions? . 7 
Nested functions are only accessible from console. log (car ("Toyota") ) ; 
inside the parent function. This means 
that the inner function contains the scope The nested function getCarName() can access the 
of the outer function. variable carName from the parent car function 





Self-executing functions 
Normally a function needs to be called in order 
to execute its code. However, a function that is 

surrounded by a self-executing function will 
run as soon as it is declared. Self-executing 
functions are often used to initialize the 
Javascript application by declaring a global 
scope variable counter. 






(function getFulLName() { 










var firstName 





LOSHhHTes 
These variables are only 
"Smith": accessible within the 
. self-executing function 





var LastName 
function fullLName() { 


return firstName + " " + LastName; 


} 
console. log (ful LName () ) ; 






JavaScript debugging 


Programmers spend a lot of time diagnosing and remedying errors and 
omissions in their code. Debugging slows down the JavaScript execution 
and shows how data is modified line by line. Since JavaScript is 
interpreted at run time and executed inside the browser, debugging 

is performed with tools built in to the browser. 


Errors in JavaScript inside the Console tab. Every Error object has 

In Javascript an error is detected or thrown when a two properties, a “name” anda “message”. 
program tries to perform an unexpected or forbidden The name indicates the type of error, while the 
action. Javascript uses an Error object to provide message provides further details about the error, 
information about the unexpected event. JavaScript such as the location in the JavaScript file where 
errors can be viewed in a browser's Developer Tools, the error was thrown. 










SyntaxError 
An error in the way the 
code is written causes a 

syntax error. This error occurs 

while the JavaScript Engine 
is interpreting the code 

at run time. 






















RangeError 
When the code attempts 
to use a number that is 
outside the range of possible 
values, JavaScript detects 
a RangeError. 








TypeError 
This error occurs when the 
wrong data type is used. 

For example, applying the 
string.substring method to 
a variable that is a number. 









URIError 
Some alphanumeric 
characters are not allowed 
to be used ina url. 

A URlError is thrown 
when there is a problem 
encoding or decoding a URI 
because of the use of a 

reserved character. 



























EvalError 
This error occurs when 
there is a problem with 
the eval () function. Newer 
versions of JavaScript do 
not throw this error. 






ReferenceError 
This error occurs when 
the code refers toa 
variable that either does 
not exist or is not in scope 
(see p.269) for the 
executing code. 
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Developer tools 

All modern browsers contain a set of Developer Tools elements in the browser. To open the Developer 

to help programmers work with HTML, CSS, and Tools for the Google Chrome browser, press 

Javascript. The Developer Tools contain functionality Command-+Option+I (Mac) or Control+Shift+I = 
to debug JavaScript and view the state of HTML (Windows, Linux). 



















The Console JavaScript debugger Scope 
Web developers can output messages to the The JavaScript debugger can be In the “Sources” tab, the 
console log to make sure their code Is executing found under the Sources tab. The window on the right contains 
as expected. The “Console” tab contains two areas: debugger makes it possible to step the Scope (see p.269). The local 
- Console Output Log: Displays system and user through the code line by line to see and global sections under this 
messages from the JavaScript execution. what is happening to the variables show the variables that are 
- Console Command Line Interface: Accepts as the code executes. On the left is defined in the current scope. 
any JavaScript instructions and executes a list of all the source files used by The Scope pane is only 
them immediately. the HTML document. Select the file populated with variables when 
to debug from this list. the script is being debugged. 









Console Sources » 











Breakpoints 

The JavaScript Engine pauses the execution of code when 

it hits a breakpoint. This allows programmers to examine it. 

The execution can proceed in one of the following ways: 

- Resume Script Execution: Resumes execution until the 
program hits another breakpoint or the program ends. 

- Step over: Executes the next line of code in a single step and 
then pauses on the following line. It steps over a function 
without debugging the individual steps of the function. 

- Step into: Executes the next line of code and then pauses 
on the following line. It will step into a function line by line. p | > Scope 

- Step out: Executes the remaining code in the current ———s ——— TT > Breakpoints 
function, and pauses when run time returns to the line 
of code, after the function was called. 











GOOGLE CHROME DEVELOPER TOOLS 





Error handling 
In Javascript, the try...catch statement Pann 
allows programmers to handle errors in noSuchCommand () ;—— This function 
the code. Normally program execution does not exist 
stops when an error is thrown by the } 
JavaScript Engine. However, if the code catch (err) { The code jumps to the catch block instead 
is wrapped in a try block, the execution of stopping the program execution 
will jump to the catch block if an exception console.error (err.message) ; 
is thrown, and the program will continue } 
as normal. It is also possible to manually 
raise an error using the “throw” statement. console. log("Script continues to 
run after the exception") ; 
The error message is 
displayed in the console TRY...CATCH STATEMENT 


The throw operator ________throw("Oops there was an error"); 
generates an error 


THROW STATEMENT 


Object-oriented 
JavaScript 


It is common 1n programming to create many 
objects of the same type. Object-oriented 
programming encapsulates properties and 
methods into classes. Functionality can be 
reused by creating new child classes. 





Class inheritance 

In JavaScript, an object can be declared 

as an instance of the class, and it will inherit 
all the properties and methods belonging 
to that class. Here, the properties and 
methods for the class Robot can be 
inherited by each of its child objects. 


Prototypes 

FUETUAIAT SET GEODICCE let parentObject = function(d { ttt 
comes with a built-in an elena a a Pee parent object 
variable called a prototype. Creates a new child object as an 

Any properties or functions } | instance of the parent object 

added to the prototype let childObject = new parentObject(); 


object will be accessible to 


a child object. A child object childObject.title = "ABC"; 


is created as an instance of 
the parent object using the 


parentObject.prototype.getTitle = function( {_ 


Sets the child object's 
title property 





keyword “new”. return this.title; | 
} Adds a new method to the 
parent object's prototype 

Calls the method in the parent _____console.log(childObject.getTitle()) ; 


object's prototype from the 
child object, and returns the child 
object's “title” property, ABC 


Functions 
Just as in prototypes, an 


object can be declared this.title 


as an instance of a function 

with the new command. 

This command acts as a ME 
constructor (a method used 


for initializing the properties let JaneEyre = new Book("Jane Eyre", 200) 


of the class). The child object 
inherits all the properties 
and methods defined in 

the function. 


function Book(titlLe, numberOfPages) { 
title; 


this.numberOfPages = numberOfPages; | 


console. lLog(JaneEyre.title) ; 








Instantiates 
the new book 





Properties and methods 
of the function 
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Defining objects 

in JavaScript 

JavaScript is a prototype-based 
language, which means that 
properties and methods can be 
inherited via the “prototype” 
property of the object. This differs 
to the way that other object-oriented 
languages, such as Python, 
construct classes (see pp.156—57). 
There are three ways to define and 
instantiate a JavaScript object in 
an object-oriented way: prototypes, 
functions, and classes. 


Classes is instantiated with the new command, while 

A Javascript class is a special kind of function that getters and setters define how a property should 
contains a constructor method and the getter and setter beread and written. Similar to functions, classes 
methods. The constructor method runs when the object can be defined in the ways shown below. 









Class declaration 


A class can be class Book { 

declared with the : 

“class” keyword. constructor (title, numberOfPages, format) { 

The constructor 

method takes the this.title = title; 

input parameters |__ Defines the 

necessary to initialize this.numbe rOfPages = numbe rOfPages; properties and 

the object properties. methods of 
this.format = format; iis eR es 





} 
} 
Calls the “title” let JaneEyre = new Book("Jane Eyre", 200, "Paperback") 
property of 
the object console. log (JaneEyre.title) ; 





Class assigned to 
the variable Book 


Class expression 


A class can also be let Book = class { 
assigned to a variable 
that can be passed constructor(title, numberOfPages, format) { 


around and returned 
by a function. this.titlLe = title; 


Libraries and 
frameworks 








JavaScript makes extensive use of libraries of prewritten 


functionality that can be called in the code to make 
programming easier and faster. Frameworks on the 
other hand provide a standard way of programming, 


by calling and using the code as needed. 


Types of libraries and frameworks 

There are various JavaScript libraries to help with all common 
programming tasks. For the user interface, there are tools for 
responsive layouts, manipulating HTML elements, and managing 
graphics on screen. For data processing, there are libraries to keep 
data synchronized, to validate user input, and to work with maths, 
date, time, and currencies. There are even comprehensive testing 
frameworks to ensure that code runs as expected in the future. 




















NODEJS AND NPM eee 


Node.js is a run time environment that is used 
to create web server and API applications in 
JavaScript. It has a large library of JavaScript files 
that perform all the common tasks on a web 
server, such as sending requests to a computer's 
file system and returning the content to a client 
once the file system has read and processed the 
requests. The JavaScript files that define the 
Node.js environment are interpreted by the 
Google JavaScript Engine outside of the browser. 
Node Package Manager (NPM) is a package 
manager for programs written in JavaScript. It 
contains a database of both free and paid-for 
applications. You need to install Node.js before 
using NPM. 











JQuery 
JQuery is a framework that 


contains many useful tools, such 
as animation, event handling, and 
AJAX (see p.265). It takes complex 
JavaScript code and wraps it into 


simpler methods that can be 
called with a single line of code. Qy 





ReactjS 

This library is used for building interactive 
user interfaces (Uls). It allows programmers 
to create complex Uls from small pieces of 
code, called “components”. ReactJS uses this 
component model to maintain state and 
data binding in single-page apps. 
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TypeScript 

TypeScript is a scripting language that 
is used to export simple JavaScript 
files that can be run inside the 
browser. It offers support for the 
latest and evolving JavaScript features 
to help build powerful components. 
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Angular 

This framework is used for building 
dynamic single-page apps. It can 
implement complex requirements of an 
app, such as data binding and navigating 
through “views” and animations. Angular 
provides specific guidelines on how to 
structure and build apps. 


MathJS 
MathJS is a library that features extensive 
tools for working with maths. It supports 
fractions, matrices, complex numbers, 
calculus, etc. It is compatible with 
JavaScript’s built-in Math library, 
and runs on any JavaScript engine. 
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Bootstrap 

This library contains many useful graphical 
elements and grid layout tools, which are 
used to create visually appealing websites that 
can scale to fit screens of any size. Bootstrap is 
a combination of HTML, CSS, and JavaScript. 
When applied to a page, it creates an 
attractive graphic user interface. 
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Graphic user 
interfaces 


A web page is a graphic user interface (GUI) through which a user 
navigates a website. HTML and CSS provide the basis for the graphic 
design, while JavaScript adds custom logic and business rules to the 
elements on the page to improve the quality of the interaction. 


Working with graphics in JavaScript user interaction. The <canvas> HTML element 

In an HTML document, <img/> tags are used to allows Javascript to draw graphics directly to the 
display image files and <svg> tags are used to display screen. Javascript also has an extensive library of 
vector images. Javascript can be used to modify the frameworks (see pp.284—85) that can be imported and 
properties of these graphic elements in response to employed to produce complex graphic applications. 


Scalable Vector Graphics (SVG) 

SVG is a format that describes two-dimensional 
graphics in code. These graphics are then drawn by the 
browser on the screen. SVGs have a small file size and 
can be scaled to any size without losing quality. They 
can be drawn and exported from graphic softwares, 
such as Adobe Illustrator or Gimp. Graphics in SVG can 
also be styled with CSS and indexed by search engines. 





Draw a company logo in SVG 

In this example, you can draw a rectangle shape for the 

background using the <rect> tag. The <text> tag can 

be used to draw the logo text. You can modify the final Draws a red-coloured rectangle 
drawing with the style attributes. with a grey border 


<svg width="200" height="100"> 
<rect style="stroke:grey;stroke-width: 10px;fill:red;" 
x="0" y="0" height="100" width="200" /> 
<text fill="white" font-size="30" font-family="Verdana" x="20" 
y="60">SVG LOGO</text> 


</svg> 





The closing </svg> tag Draws the logo text in Uses CSS style attributes 
front of the rectangle to define SVG elements 
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HTML Canvas 

The <canvas> element defines a space 

on the web page where graphics can be 
created using JavaScript. This space is 

a two-dimensional grid onto which 
JavaScript can draw lines, shapes, and text. 
The grid coordinates (0, 0) are measured 
from the upper left-hand corner. 





Graphics libraries 

JavaScript has several built-in graphic libraries that make 

it easier to work with complex graphics on the Web. Each 
library has a specific purpose, such as converting numeric 
data into graphs, representing statistical data as infographics, 
or mapping a virtual world in a computer game. 
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Chart.js 

This library allows the programmer to add graphs 
and charts to a Web document. It is an open-source 
library that works well on tablets and mobile phones. 
Bar charts, Doughnut, Line charts, and Area charts 
are some of the core charts in Charts. 





D3.js 

Data-Driven Documents or D3,js is used to 
create colourful, animated, and interactive 
representations of data. It is brilliant for 
drawing graphs and organizing data ina 
structural manner. 





Animating the web page 


JavaScript is used to extend the functionality of a website 
and make it more dynamic. Here it will allow you to add 
intelligent and interactive behaviours to the existing 
HTML framework, completing the web page project. 





What the program does Interactive website 
In this part of the project, JavaScript is added to the structured and The web page will now have interactive 

: : elements. The promo bar on top will cycle 
styled web page created in Styling a web page (see pp.242-63). through four messages, and the scroll button 
The functionalities added in this part of the project will allow the will be visible at the end of the web page. 
web page to handle customized user interactions. It will scroll up to the top when clicked. 
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» How to create JavaScript files a Time: JavaScript is used in almost all websites. It helps web 
>» How to use JQuery 


1 hour developers make web pages more attractive and 
, interactive by implementing custom client-side scripts. 
Lines of code: 89 ; 
pier nade HTML It even allows the use of cross-platform run time 


Difficulty level engines, such as Node.js, to write server-side code. 





Project requirements Getting started 

For this project, you will need To add the interactive functionality of JavaScript 
the previously created HTML to the website, you will require multiple JavaScript files. 
and CSS files. You can continue You will also link the HTML document to a JavaScript 
using the same IDE. framework (see pp.284—85) to make programming easier. 


(aay ADD A FOLDER 
Create a new folder, called “scripts”, to contain the JavaScript files. 


Ona Mac, open Finder and create the folder inside the website folder. Then, 
open Visual Studio, right-click on the project name, select Add and choose 
Add Solution Folder. In Windows, right-click on the project name in Solution 
Explorer, select Add and choose New Folder. 





HTML FILE ; 
fm] Solution 


sce Build PetShop 


Rebuild PetShop 
Clean PetShop Adds the 
Unload new scripts 


folder inside the 
View Archive solution folder 


Run Item 
start Debugging Item 


Re oa New Project... 


Add Existing Project... 





CSS FILE 





MAC 


 PetShop ky Build Web Site 
® Publish Web App 
scope to this 





DEVELOPMENT = ; 
ENVIRONMENT New Solution Explorer View 


Add 


Add new item 
“3 Existing item 
New folder r 


WINDOWS 


Es GETTING STARTED 


ie ADD JQUERY . 
Before adding the custom JavaScript files, you need to pointing to the online location that you can use to retrieve 
add JQuery (see p.284) to the HTML file. You will use JQuery inthe JQuery. This online location is called a CDN (content delivery aS 
custom scripts to make it easier to target the HTML elements. In network). You can download these files and host them in 
the “index.html” file, add a <script> tag inside the <head> tag, your own site, but it is often easier and quickerto useaCDN. WTML 


<Link href="https://fonts.googleapis.com/css?family=Anton| 
Open+Sans" rel="stylesheet"> 

<script src="https://code. jquery.com/jquery-3.3.1.min.js"> 
</script> 


</head> 


The “src” attribute points Link to retrieve 
to the CDN for JQuery JQuery 





Adding JavaScript files 

The web page in this project needs three custom 
JavaScript files. In this section, you will create the first two 
files — one to contain the global scope variables and another 
to contain functionality for the features of the home page. 





Ls 


HOME.JS 
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ADD NEW FILE 
The first custom script you im] Solution 
need to add is called “app.js”. This 
will add an “app” class/function that vy  Petshop 
you Can instantiate to hold all the > ©5) Solution items 
global scope variables. Right-click Build PetShop 


on the scripts folder, select Add 








Rebuild PetShop 
and choose New File to create a 
JavaScript file. Name this file “app.js”. Clean Petshop 
Unload 
View Archive 
Run Item 
start Debugging Item 
TAGE Aca New Project... 
Add Existing Project... 
Add Solution Folder 
Click here to create 
a new JavaScript file LS 
REFERENCE APP.JS 
You now need to link the JavaScript file to the HTML you declare the JavaScript files is important, because 


file. In the “index.html’” file , add a <script> tag that will point to the scripts must be loaded into the JavaScript Engine 
the newly created JavaScript file. Place this link inside the <head> (see p.264) before they can be called. For example, JQuery 





? 


tag, just below the <script> tag for JQuery. The order in which must be loaded before you can use any of its methods. HTML 


<script src="https://code.jquery.com/jquery-3.3.1.min.js"> 


</scri pt> Adds a new <script> 

tag that points to the 
<script src="Sscripts/app.js"></script>—H—__ "ewJavascript file 
CREATE FUNCTION 


Inside “app.js”, declare 

a variable called app that isa 
self-executing function (see p.279). 
Then add a property called 
“websiteName’” and a method 
called “getWebsiteName” inside 
the function. This is an example 

of how to add functionality to /* Methods */ 
the app class. 


var app = (function O { 





Round brackets 
/* Properties */ instruct the JavaScript 
Engine to run that 


var websiteName = "PetShop"; _ function immediately 








return { 


Code after double slashes (//) getWebsiteName: function () { 
or between /* and */ is treated 


as a comment in JavaScript return websiteName: 
9 





HO; 


SAVE 


iy ADD ANOTHER FILE 25 REFERENCE HOME,JS " 
Next, add another new custom As before, you will need to reference this new JavaScript as 


script with all the logic you will need file in the HTML document. In the “index.html” file, add a <script> 
for the home page. Follow the same tag that points to the “home js” file. Ensure that this is placed 
steps as before to create a new JavaScript below the reference for “app.js” added in step 2.2. HTML 
file inside the scripts folder, and name it 
“home js’. 


<script src="scripts/app.js"></script> 


UN 


<script src="scripts/home.js"></script> 








Indicates that the file is 


HOME.JS inside the scripts folder SAVE 






ADD FUNCTIONALITY TO HOME.,JS 





In “home.js”, create a function called HomeIndex(), page have finished loading before running the code within 
which will contain all the functionality required by the it. Inside the on document ready () function, you will 
home page. Below this function, add a on document instantiate the HomeIndex() function as a property 
ready () function. This is aJQuery command that instructs of the “app” object, which has already been instantiated 
the JavaScript Engine to wait until all the elements on the in the “app,js’ file. 


function HomeIndex() { 


The dollar sign denotes 
} the JQuery function 


Makes a function 
available after the 
document is loaded 





SS SS SSS ST 
$ (document) .ready(function () { 


Comments are ignored, 











/* Instantiate new Home class */ and will not be executed 
app.homeIndex = new HomeIndex () 3; —— Links “homes” 
to “app.js” 
RUE 
Managing the Scroll et ~——S”:”:—:~—=CSe 
to top button (28° OS Pet Shop - , 
In the next few steps, you will add < file:///PetShop/index.html 
functionality to the Scroll to top button. 
You need to add code to control when the 
button becomes visible and to make it scroll & 
back to the top of the page when clicked. SUBSCRIBE ho GIN AUDI Oe 


Enter your email address — JoinNow | 
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DEFINE PROPERTIES 

Add a property inside the 
HomeIndex() function to set the 
height from the top of the page at . 
which the Scroll to top button should /* Properties */ 
become visible. 


function HomeIndex() { 





const heightFromTop = 300; 


The height will not change, 
so it is defined as constant 


faz) DEFINE METHODS 
Now add a method to initialize the Scroll to top button. | heightFromTop value. The button is then made visible or 


This method will control two aspects of the button. It will add hidden accordingly. The method also adds an “on click” 
an “on scroll” event handler, so that every time the user scrolls event handler, so that every time the user clicks the Scroll 
up or down in the browser, the JavaScript Engine checks if to top button, the page will scroll back to the top. Add this 
the scroll distance is more than the amount defined in the code within the HomeIndex() function. 


const heightFromTop = 300; 

/* Methods */ 

this.initialiseScrolLToTopButton = function () { 
} 





The keyword “this” refers 
to the owner object, in this 
case the HomeIndex() function 


3.3 ADD CALL TO INITIALIZE 
In the document ready () function, add this code 
below the “app.homelndex” declaration. This will add the call 
to run the initiaLiseScroLLToTopButton method. 


$(document) .ready(function () { 
/* Instantiate new Home class */ 
app.homeIndex = new HomeIndex () ; 
/* Initialize the Scroll To Top button */ 
app.homeIndex.initialiseScrollLToTopButton() ; —————— Initializes the 


Scroll to top 
}); button 


34 SHOW THE BUTTON 
Add the “on scroll” event handler in the JavaScript command scrollTop (). It then compares 


initialiseScrollToTopButton () function. This the current scroll distance with the “heightToTop” value 
determines the current scroll distance by using the to see if the scroll button needs to fade in or fade out. 


/* Methods */ 


This instruction 





this.initialiseScrolLToTopButton = function () { tells JQuery to 
run the code 
/* Window Scroll Event Handler */ block every 

time the user 

$(window).scroll(function () { scrolls the page 


/* Show or Hide Scroll to Top Button based on 
JQuery selector 
that targets the scroll distance*/ 
“window” object 


var verticalHeight = $ (this) .scrollTop() ; 





This selector tells 








if (verticalHeight > heightFromTop) { JQuery to use the 
element that 
$("#scroLLToTop") .fadeIn(Q) ; triggered the 
This JQuery ——— event: the 
selector targets } else { JQuery methods that window object 
the HTML automatically animate in this instance 
element with $("#scrol LToTop") .fadeOut O 2 the button 
id="scrollToTop” 


ROE 


35) CLICKING THE BUTTON 
Next, you need to add a event handler to that detects when the button is clicked. Use the 


manage what happens when the Scroll to top button animate() command to instruct JQuery to animate the 
is clicked. To do this, add the JQuery click() function “html” and “body” elements when the button is clicked. 


$("#scroLLToTop") .fadeOut () ; 





} 
BoE 
This code runs 
/* Scroll to Top Click Event Handler */ every time 
the button 
$("#scroLLToTop") .click(function ( { is clicked 
$("html, body") .animate({ scrollTop: 0 },"slow"); 
}); Stops when the is 
Animates the “html” scroll reaches the bf 
} and “body” elements top of the page 


SAVE 


Animating the web page LO / LOO 


VIEW PAGE 

Test the Scroll to top button. Open the browser and enter the url 
for the web page into the address bar. In Windows, the url to the file on 
your local computer will be “file:///C:/petshop/index.html”. On a Mac, the 
url will be “file:///Users/[user account name]/PetShop/index.html”. The Scroll 
to top button should be visible now. Click on it and make sure that the page 
scrolls back up to the top. 
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BIRDY NUM NUM 


KEEP YOUR BIRDS CHIPPER 





Yummy snacks and feeders 
for every kind of bird. 


CONTACT US 
TEL: 012-345-6789 


Pet Shop 
80 Strand 
London 

WC2R ORL 





Enter your email address The Scroll to 


top button 
will now scroll 
to the top 

of the page 
when clicked 








Managing promotional messages 

The next element that needs to be managed 
is the promotional bar that appears on top of the 
web page. The promo section in HTML contains four 


different messages (see p.221). Using JavaScript, you 
will program the promo bar to cycle through these 
messages, making them appear one at a time. 







(2 ADD A NEW CUSTOM SCRIPT 
You will want the Promotional Messages to be visible 


on all pages of the website. Create a new JavaScript file called 

“common,s’. The code in this file will provide functionality for 
the promotional messages section at the top of the web page. 
Follow the same steps as earlier to create a new JavaScript file 
within the scripts folder. 


REFERENCE FILE . 
Now use a <script> tag to reference the new 
file “common,js” in the “index.html” file. Add this line 


of code below the reference for the “home,js’ file. 











HTML 
<script src="scripts/home.js"></script> a 
<script src="scripts/common.js"></script> Links the JavaScript 
file to the HTML file 
SAVE 
CREATE A FUNCTION " 
Inside “common,js”, add a new function called Common (). 
This function will act as a class (see pp.282-83) that can be {3} 
instantiated as a property of the “app” object defined previously. 
Add an on document ready () function below this to instantiate js 


the “Common’ class as a property of the “app” object. 


function Common() { 


} 
$ (document) .ready(function () { 


/* Instantiate new Common class */ Instantiates the “Common” 
class as a property 








app.common = new Common () ; 


}); 
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ADD PROPERTIES 
Next, inside the Common () 
function, add a property called 
“promoBar”. This is a JavaScript object 
(see p.269) that contains all the variables 
used by the Promotional Messages 


function Common() { 





Creates a reference 
to the object that 
can be used later in 


let self = this; 





/* Properties */ 





section to manage itself. its methods 
this.promoBar = 
{ nuLl indicates 
This is the list of <div> that the variable 
tags with messages promo Items: null i has no value 


This is the index of the <div> 





currentItem: 0, 

that is currently visible 

This is the number 
of <div> tags 

} with messages 


numberOfItems: 0, 


45- INITIALIZE THE PROMOTIONAL MESSAGES 
Add a method to initialize the Promotional Messages 
section. This method will set the values of the properties 


contained in the “promoBar” object, and will start the loop 
to show the next message item. 


numberOfItems: 0O, 
}; 
/* Methods */ 
this.initialisePromo = function () { 


/* Get all items in promo bar */ 


This JQuery selector returns 
an array of all the divs inside 
an element with id="promo” 


let promoItems = $("#promo > div"); 





/* Set values */ 

this.promoBar.promoItems = promoltems; 
this.promoBar.numberOfItems = promolItems. length; 
/* Initiate promo Loop to show next item */ 


this.startDelay() ; 





Returns the number of 
elements in this array 





this.startDelay = function () { 


/* Wait 4 seconds then show the next message */ 


setTimeout (function () { —__________— This function instructs 
JavaScript to repeat the call 
self.showNextPromoItem() Te et aed 
}, 4000) ; 


This function will fade out the current 
promo message and fade in the next message 


fave) CYCLE THROUGH THE PROMOTIONAL MESSAGES 
Add anew method below the initialisePromo() function. must be the first message in the list. The array index property 


This method will hide the current message, and then determine the (see p.268) will be used here. The value of the variable currentItem 
index of the next message before displaying it on screen. Ifthe current indicates the index number of the displayed message. As this value 
message is the last item in the message list, then the next message changes, the message being displayed will also change. 


this.showNextPromoItem = function () { Pe a ee ice 
to extract the array item with 


/* Fade out the current item */ the given index number 


$(self.promoBar.promoItems) .fadeOut ("Slow") .promise(). 
done(function () { 
/* Increment current promo item counter */ 
if (self.promoBar.currentItem >= (self.promoBar. 
numberOfItems - 1)) { 


/* Reset counter to zero */ 


self.promoBar.currentItem = 0; ————— Ensures that the 
currentItem never 
} else { exceeds the index number 


/* Increase counter by 1 */ 





self.promoBar.currentitem++; Cycles through the 
promotional messages 


} 


/* Fade in the next item */ 
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$(self.promoBar.promolItems) .eq(self.promoBar.currentItem) . 





fadeIn("slow", function () { 
/* Delay before showing next item */ 


self.startDeLay( ; 
}); 





} ); Displays the next promotional 
message in the list 


} 


AT ADD CALL TO INITIALIZE 
Finally, add a call to start cycling through the promotional messages. 


In “commons”, in the on document ready () function, add a call to run 
the app.common. initialisePromo() function. 


$(document) .ready(function () { 
/* Instantiate new Common class */ 
app.common = new Common () ; 
/* Initialize the Promo bar */ 


app.common. initialisePromo() ; 





}); 
SAVE 
AS VIEW PAGE 
Now go to the browser and refresh the page. Check that The promotional 
the orange promotional messages bar on top of the web page is messages appear 
cycling through the four messages specified in the HTML file. one ata time 
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~) Hacks and tweaks 


Explore fonts and icons 
To make a website unique and personalized, youcan ‘This project uses Google Fonts for all the text 


change the way it looks by using different images elements on the web page. You can explore and 
and fonts. Websites also use icons to distinguish try different font options to enhance the look 
between different sections and pages of the site and feel of your web page. You can also search 
easily, such as Home, Contact, and Shopping Cart. for other favicon images. 

. © Pet Shop 





< file:///PetShop/index.html 


LOVE FISH 
You can change the _________THE WIDEST RANGE OF FISHES 


font of any text element 


on your web page, from ; 
the body text to the Indoor and outdoor, we've got them all! 


headings on the website 









CHOOSE NEW ICONS OR FONTS 

You can use the Google Material Icons website to look for 
more options for the favicon. To change the fonts used on the web 
page, both the HTML and the CSS files need to be updated. First, 
choose your new font from the Google Fonts website. Then, go 

to “index.html” and under the <head> tag, edit the <link> tag that 
contains the reference to the fonts. Replace the font name with 

the new font you want to work with. 








Link to the 
Google Fonts 


website 





<Link href="https://fonts.googleapis.com/css? P 
Link to the 
family=Anton|Oswald" rel="styLesheet"> Google Material 
Icons website HTML 


The font “Open Sans” has been 
replaced with “Oswald” 
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APPLY NEW FONTS d 
Now, go to the “global.css” body { 
file. Try changing the font of the body 
elements, as shown here. You will margin: 0; Font changed from Ce 
have to edit the “font-family” style “Open Sans” to “Oswald” CSS 
definitions within the body selector adding: 0: 
to do this. Then, save both the files P Sales 
and test the program. Your text for font-family: "Oswald", sans-serif: 


the body elements will appear in the 


new font (see opposite). font-size: 15px; 


The other elements ___________bhackground-color: white; 
remain the same 


color: #333; 0 


SAVE 


P37) LOAD UPDATED FILE ‘ 
At times, even when the code files have been assigns values to specified parameters - to force as 


updated, the browser still displays the old web page. This — the browser to download the latest version of the 
may happen because the browser could be usingasaved __ file. You can use any querystring, as long as it is 


version of the file rather than downloading it again. Since —_ different to the previous versions that are already HTML 
users may not refresh the page every time they visit the stored. The querystring is added to the <link> tag 
site, you Can use a querystring - part of a url, which in the HTML file. 


<Link href="styLes/global.css?v=2" rel="stylesheet" /> 





Add social media 


Most websites today find it necessary to is possible for you to add social media links 
advertise their social media accounts so that on the web page. Start by adding a button to 
users can follow them on various platforms. It encourage users to follow the website on Twitter. 
Pr LOAD THE WIDGET " 
To display the Twitter widget on the web page, you will 
need to load the “widgets.js” script from Twitter. Open the “index. The new <script> tag can 
html” file, then add a <script> tag inside the <head> tag to link the be placed anywhere inside 
widget to the web page. the <head> tag HTML 


<script src="scripts/app.js"></script> 
<script src="scripts/common.js"></script> 
<script async src="https://platform. twitter.com/widgets.js" 


charset="utf-8"></script> 


= HACKS AND TWEAKS 


(24 ADD BUTTON 
Now add the Twitter button to the Top Menu. Inside the “topLinks” 


div unordered list, add a new list item that contains a hyperlink to the 
Twitter page. If you refresh the browser and view the page on screen, you 
will see a new social media button in the Top Menu. 


...<div id="topLinks"> 


<ul> 

<Li> 
<a href="/">Home</a> 

</li> 

<li> 
<a href="/">About</a> 

</1Li> 

<Li> 
<a href="/">Shop</a> 

</li> 

<Li> THE 
<a href="/">Contact</a> 

</li> 

alae 
<a href="https://twitter.com/PetShop" 
class="twitter-follow-button" data-show 
-count="false"> Follow @PetShop</a> 

</1i> 

</ul> 
</div> 


: ) Pet Shop 


np, 
es 
ar 
sa 
ye. q 

oo 
Sie? 
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PET SHOP Home About Shop — Contact Follow @PetShop The button ad wae 
next to the menu items 





Page template 

This project only includes code for the website 
home page. However, other pages, such as About, 
Shop, and Contact in the Top Menu, are required 
to make a fully functioning website. In order to 
create these pages you will need a template, which 


O 
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contains all the elements that are common 
to every page of the website. This template 
will include the meta links to the CSS 

and Javascript files, along with all the 
common HTML code. 








CONTACT US 
































ABOUT 


TEMPLATE HTML FILE 
Create a new file called 
“template.html”. Then, copy the 
HTML from the home page into 
this new file. Insert the code 


shown here into the template file. < 
< > 
Now try creating the other /div 
pages of the website. Start by TATE 


copying the content of “template. 
html” and pasting it into a new 
file. Rename the file accordingly; 
for example, “contact.html”. Then, 
using the instructions given for 
the home page (see pp.220-33), 
insert the HTML for the “Contact 
page” into the placeholder “## 
Insert page content here 
###’ given in the template code. 


</div> 


<div class="clear spacer v80"></div> 
<div class="wrap"> 


## Insert page content here ### 


CONTACT 


<a href="/Shop">SHOP NOW</a> 


Replace the 
code between 
the Banner 
section and the 
Footer section 
with these lines 


Insert HTML for the 
new page between the 
div tag with class ="wrap” 


ex SERVER-SIDE TEMPLATE OPTIONS 
| especially if there are lots of pages in the website. You 


n order to automatically inject the template into each 
page, you will need to use a server-side language, such as C# MVC 
or Python Django. In this project, you repeatedly had to include 
the links to the CSS and JavaScript files into every HTML page 
on the website. This is obviously difficult to update and maintain, 


may want to explore the “layout file” concept in C# MVC 
(https://www.asp.net/mvc) and the “template inheritance” 
feature in Python Django (https:/Avww.djangoproject. 
com) to solve this problem. 





Responsive website 


Responsive layouts enable programmers to create and 
publish the same content on any digital platform. This is 
achieved through a clever use of HTML and CSS. In this 
project, you will use HTML, CSS, and JavaScript, as well 
as JOuery and Bootstrap, to create a responsive website. 


planes button 


How it works ec60 ere @ TRAVEL-NOW 
The focus of this project is to build a responsive website : 
using JOuery and Bootstrap (see pp.284—85). Each element fle: //Travel-now/index. html 


of the website will be programmed using HTML, CSS, and a 
JavaScript at the same time, to see how they work together 
to achieve a visual effect. You will use JOuery in the custom 


scripts to target HTML elements, and then use Bootstrap to 
add responsiveness to the website. 


stant The elements adjust their 
size and align vertically when 

* 

« 


the screen size is reduced 
7 
ar Final website 


= The website created in this project will be 


v We all dream of a great holiday. 
ee Contact us to make your dream come true! 


PROGRAM DESIGN WIDE SCREEN 











divided into several sections, many of which We all dream of a great holiday. 

will contain hyperlinks to other pages of the Contact us to make your dream come true! 
website. All the elements will be programmed 

to make them fit any size of screen. NARROW SCREEN 


aS i oe a ae a as _——-¢ 
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>» How to use Bootstrap grid layout G TIME: 
3-4 hours once and to render correctly on a variety of devices, such 


>» How to use Bootstrap controls 


in your website Lines of code: 659 
>» How to use JQuery to target Difficulty level 


HTML elements & 





Project requirements 
This project will require several 
programming elements to build 
the website. 


Text files 

You will need HTML, CSS, 
and JavaScript files to 
build this website. You can 
either use a simple text 
editor to create them 

or a dedicated IDE like the 
one used in this project. 


Development 
environment 
The IDE (see pp.208-209) 
“Microsoft Visual Studio 
Community 2019” is 
used in this project. It 
supports a large variety of 
programming languages 
and paradigms. 





Browser 
The Google Chrome 
browser is used to run the 
code in this project. Its 
“Developer Tools” can be 
used to better understand 
what you see in the 
browser. However, you can 
use any browser you are 
comfortable with. 


Images 

Get a copy of the images 
folder for this project from 
www.dk.com/coding-course. 
These images will be used 
to build the website. You 
can also use your own 
images if you like. 
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Responsive layouts allow the website to be programmed 





as desktops, tablets, and smartphones. This compatibility 
with varying screen sizes means that this technology is 
often used by sites to reach a wider audience. 


Getting started 

To create this project, you first need to install 
Visual Studio (see p.217). You can then add all the essential 
folders and files that are required to create the home page 
of the website. 
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This layer will 
contain a company 
logo and the Top 


Menu links to other 
© pages on the site 
= QUOTE This layer will display 
a sentence about 


travelling that will 
change every 
five seconds 








=, . 


© 





to other pages on 
the site 


This layer will be 
a carousel with 
images that will link 


Home page design 

The elements of ahome page can be understood as a series 
of horizontal layers that sit one above the other. This home 
page will have seven layers. Some of its common elements 
will be repeated on every page of the website. 


(qa) CREATE THE FOLDERS [12] ADD AN INDEX FILE 
The first step is to create a website folder on your computer to Follow the instructions given in Build a web 














contain all the files for this website. Name the folder “Travel-now”. Then, page (see p.219) to create an “index.html” file. Add 
open a new project in Visual Studio and create a solution file called this file to the website folder. Visual Studio will 
“Travel-now.sln” and save it in the website folder. Follow the steps from create the file with the minimum code required for 
Build a web page (see pp.218-19), to do this. Paste the previously a valid HTML page (see p.220). If you are using 
downloaded images folder inside the website folder. The path to the another development environment, you may need 
website folder on your computer should be as shown below. to type the code into the new index file. 
Users/[user account name]/Travel-now » 
MAC 
C:/Travel-now 
WINDOWS INDEX.HTML 
ADD A STYLE SHEET 
Now add a “styles” folder for the website (see p.243). Ona Mac, right click on the styles folder and select 
Then, add a new CSS file called “global.css” inside the styles Add, then choose New File. Go to Web and select 
folder. The styles defined in this file will apply to all the pages Empty CSS File and save it. Now add the colour and : 
of the website. In Windows, right click on the styles folder and font references for the website at the top of the CSS CSS 


select Add. Then, choose Add a new item and select Style Sheet. _ file. You can refer to these later when you need them. 


Comments contained Font used 

within these marks are for headings 

ignored by the browser and logos 
/* 





font-family: "Merriweather", serif; 

Font used for normal 
font-family: "Open Sans", sans-serif 32 Paragraph text 
font-family: "Merienda One", cursive; Font used in the 

“quote” section 
Text color : #000; 

Dark blue : #345995; 
Light blue : #4392F1; 
Red : #D7263D; 

OOO i Fex codes forthe 
Yellow : #EAC435; colours used on 

the website 

Mauve : #BC8796; 
Silver : #COCOCO; 


Light gray : #D3D3D3; | 








*/ 
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ADD STYLES TO 4 
biter body { 
Add the style definitions for Instructs the browser to make 
the Bese ell aap a ma rgi n: 0; the <body> element fit the entire 
comment section. [nis will se width and height of the screen CSS —-—a 





the values for the margin and . : . 
padding (see p.245), font, font padding: 0; 
colour, and background colour. 

As these styles are applied to the 
<body> elements, they will be 

used for all the text elements in the 
document. You can override the 
default font styles for the headings, 
buttons, and hyperlinks later. 










font-family: "Open Sans", sans-serif; 
font-size: 15px; 
color: #000; 


background-color: white; 


Sets the font and 
colour definitions 


he next element to be styled are the headers. Define 
for the vertical spacers that will the font styles for the “h1”, “h2”, and “h3” headers that will be used 
be used throughout the website. throughout the website. All the headers will have the same font, 


(is) ADD SPACERS 16° STYLE THE HEADERS 
Next, add style definitions a T a 





These will create standardized CSS but a different font-size definition. Add this code just after the CSS 
white spaces between the various spacers added in the previous step. 
sections of the page. 
Compound style signature Font used by 
with classes “spacer” and “v80" all the headers 
.spacer.v80 { h1, h2, h3 { 
height: 80px; font-family: "Merriweather", serif; 


} } This property defines the preferred font 
hl { to use and a second font type in case the 


.spacer.v60 { preferred font is not available 





height: 60px; font-size: 60px;—— Only"h'" headers 
will have the font 
} } size 60px 
.spacer.v40 { h2 { 
height: 40px; font-size: 30px; Only "h2" headers 
will have the font 
} } size 30px 
.spacer.v20 { h3 { 
height: 20px; font-size: 20px; 


This spacer can only be Only “h3” headers 
applied to an element that will have the font 
has both “spacer” and “v20” size 20px 


in its “class” attribute value 





STYLE THE CORNERS 

Many elements of the website 
will require rounded corners. Reuse 

the “roundedCorners” class so this visual 
characteristic can be shared by the 
elements. If only one number is stated 

in the border-radius definition, then all } 

four corners will exhibit that property. 

Add this code to “global.css” just after .roundCorners.top { 
the code from the previous step. 


.roundCorners { 


terefete a pel WEES] Eevee [epi hey te 
applies to all 


the four corners 





border-radius: 15px 15px 0 0; 
| 


These refer 








Only the top and } to the four 
bottom corners corners 
are rounded .roundCorners.bottom { - topLeft, 
topRight, 
border-radius: 0 0 15px 15px; bottomRight, 


and bottomLeft 








ADD A SCRIPTS FILE 
Now add a new folder called This file will contain an “app” class 
“scripts” to the website folder. This will function that will be instantiated to 
hold all the JavaScript files for the project. hold all the global scope variables 


In the Solution Explorer window, right 


click on the project name Travel-now ; 

to create the folder. Then, create a new & 

JavaScript file called “app.js” and add , = _ 

it to the scripts folder. Follow the { s } ; > > 
instructions given in Animating a web 1 1 

page (see p.291) to create this file. 


APPJS SCRIPTS TRAVEL-NOW 
MAKE A FUNCTION "I 
Add this code inside the = . ae 
“app.js’ file. This will declare a variable HeneaER Es (function () { {3} 
called “app” that is a self-executing , 3 
function. Add a property called /* Properties */ js 


“websiteName’” and a method called 


“getWebsiteName’ inside it as an BERRMSS SR ESO ane RS RR EREEDeaaeeaESSsSs—— Pa 
example of how to add functionalit meee 
to ep class. /* Methods */ website 

return { 


getWebsiteName: function () { 


return websiteName; 
Round brackets around 
the function instruct the } 
JavaScript Engine to run that 
function immediately } 


HO; 
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Creating the navigation bar 

The first element to be created is the navigation bar 
on the home page. This bar will appear on all the pages of the 
website. In this section, you will program the navigation bar 
and then add some hyperlinks to it that will connect to all the 
other pages of the website. 


ei ADD THE TITLE AND FAVICON 
Go to the “index.html” file. Inside the <head> ars 





definition, a browser with a narrow screen will 





tag, add a <meta> tag with the “viewport” definition zoom out to try and show the whole page on 
as shown. This allows the HTML document to adjust its the screen. Next, add a <title> tag and then the 
content to fit the screen. Without the viewport meta favicon (see p.221) definition. HTML 
<head> Instructs the browser to 
display the HTML document 
<meta charset="utf-8" /> at the correct resolution 


<meta name="viewport" content="width=device-width, 


initial-scale=1, shrink-to-fit=no"> This text will 
appear as the tab 
2G TEES TRAV ED ENOR Se Ei El Se ee 828 28 88S S 5S 5S SSS SES SS eso titel iEbONSEE 


<Link rel="icon" type="image/png" href="images/favicon.png"> 


</head> 





This attribute points to the 
“favicon.png” file in the images folder 


(23) ADD THE MODULES 
Now add references to the JQuery and Bootstrap 2. 





JavaScript files in the HTML file. Inside the <head> tag, add the This <script> tag for Bootstrap 
<script> tags and <link> tags just below the <link> tag to the favicon. contains an “integrity” attribute 
The “src” attributes in the <script> tags point to the online location that ensures the downloaded HTML 
of the modules from where they can be retrieved. file has not been manipulated 


<Link rel="icon" type="image/png" href="images/ favicon. png"> 
<script src="https://code. jquery.com/jquery-3.3.1.min.js"> 
</script> 

<script src="https://stackpath.bootstrapcdn.com/bootstrap/ 
4.2.1/js/bootstrap.min.js" integrity="sha384-BOUglLyR+jN6Ck 
vvICOB2joaf514L3 gm9GU6Hclog6Ls7i6U/mkkaduKaBhlLAXv9k" cross 











origin="anonymous"></script> 


Reference to the JQuery file 





The “src” attribute in this tag 
<script src="scripts/app.js"></script>———_ points to the “scripts/app js’ file 


<Link rel="stylesheet" href="https://stackpath.bootstrap 


cdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity= 








"sha384-GJZZqFGwb1QTTN6wy59f fF1BuGJ pLSa9DkKMpODgiMDm4iYM othe 
j70gZWKYbI706tWS" crossorigin="anonymous"> CSS file 
<Link href="https://fonts.googleapis.com/ 

css?fami Ly=Merienda+One|Merriweather | Open es 
+Sans" rel="stylesheet"> | rea 





<Link href="styLes/global.css" rel="stylesheet" /> 








Link to the custom The custom CSS file is added at 
CSS file - global.css the end as it must overwrite the 
default Bootstrap CSS definitions 


ORDER OF TAGS eee 


The order in which you declare the 
JavaScript files is important. This is 
because JavaScript functions must be 
loaded into the JavaScript Engine before 
they can be called. For example, JQuery 


must be loaded before Bootstrap because 
Bootstrap uses JQuery to execute Its 
functions. This is also true for your custom 
JavaScript files. They must be added to the 
HTML after the JQuery and Bootstrap files 
in order to call their functions. 





ADD A BOOTSTRAP 














Tells the navbar when to collapse 
ero sis to a hamburger menu button ars 
Next, inside the <body> tag, adda 
<nav> tag to contain all the Bootstrap 
navigation bar elements. If the screen <body> HTML 
is wide enough, it will display the Top 
Menu list horizontally along the top of <nav class="navbar navbar-expand-md 
the page. If the screen is narrow, then 
the Top Menu will be replaced by a navbar-dark fixed-top bg-mauve"> 
“hamburger menu’ button - a button | os ! 
resembling a hamburger, used to toggle </nav> 
a menu or navigation bar. When this Fixes the navbar Sets the background 
button is clicked, the Top Menu will </body> position at the top colour to mauve 


display a vertical list. 
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ADD A BOOTSTRAP CONTAINER . 
The navbar must run across the full width of the tag. This Bootstrap class defines the margins on the 

screen, but the Top Menu logo and hyperlinks must only left and right of the element. Then, inside the “container” 

occupy the centre of the page where all the page contents div, add an <a> tag to display the company logo. 

will go. Add a <div> with class = “container” inside the <nav> — When clicked, this will hyperlink to the home page. HTML 





<nav class="navbar navbar-expand-md navbar-dark fixed-top 
bg-mauve"> 
Contains all the HTML elements that 
<div class="container" >—— "eed to appear centred on the page 


<a class="navbar-brand logo" href="index.html">TRAVEL-NOW 





aViae 
</div> 
</nav> 
This Bootstrap CSS class specifies This custom CSS class 
that the element must appear inline defines the font to be 
with some padding and margins used for the logo 


DEFINE THE HAMBURGER BUTTON 

Inside the “container” div, below the “navbar- 
brand” </a> closing tag, add the “navbar-toggler” <button> 
tag. This element will perform the “hamburger menu” 
button functionality. When clicked, the button displays the HTML 
Top Menu as a vertical drop-down list. 








This attribute manages the 
state of the drop-down menu 


<a class="navbar-brand logo" href="index.html">TRAVEL-NOW 


</a> 
This class contains ic a in isms nan 


display properties, _ = " _w " = = 
Beam Ge <button class="navbar-toggler" type="button" data-toggle 








and pacing "collapse" data-target="#navbarCollapse" aria-controls= 
"navbarCoLlapse" aria-expanded="false" aria-Label= 
"Toggle navigation"> 
<span class="navbar-toggler-icon"></span> 
</button> 
</div> 
The “aria” classes are used by 





assistive technologies, such as 
screen readers for the blind, to 
make sense of the complex HTML 


2.6 | ADD HYPERLINKS TO THE NAVBAR 
Next, add the “navbarCollapse” div, which will contain an the “container” div, just below the closing tag for the >. 


























unordered list of the actual hyperlinks that will appear in the Top “navbar-toggler” </button>. Then add a spacer div after 
Menu of the website: Home, Deals, and Contact Us. Place it inside the </nav> closing tag. 
HTML 
</button> Indicates whether 
the navbar is in 
<div class="collapse navbar-collapse" id= the “collapse” or 
. | “full-screen” state 
"navbarCollapse"> | 
<uL id="topMenu" class="navbar-nav mr-auto"> 
<1i class="nav-i tem active"> Contains style definitions 
for the unordered list 
<a class="nav-Link" href="index.html"> 
Home <span class="sr-only"> (current) 
</span></a> 
| ie </1Li> 
Contains style definitions 
for the list items that will <li clas s=" nav-item "S 
appear as a horizontal 
or vertical list, depending r <a class="nav-link" href="deals.htmlL"> 
on the width of the screen . 
Deals</a> 
</li> 
Anchor tags ___| 
hyperlink to other <1i class="nav-i tem"> 
pages on the website 
<a class="nav-Link" href="contact.htmlL"> 
Contact Us</a> 
</li> Each <a> tag isa member of the “nav-link” 
class, which specifies mouse-off and hover 
</ul> | style definitions for the navbar hyperlinks 
Closing tag for the 
</div> “navbarCollapse” div 
Closing tag for the 
</div> “container” div 
</nav> Closing tag for Adds a vertical height of b 
the “navbar” div 80px between the navbar NY 
<div class="spacer v80"></div> Peet SISTA 
SAVE 





SPECIFY THE BACKGROUND COLOUR 


Now go to the “global.css” style sheet to set Bs 
the background colour of the navigation bar. Add this -bg-mauve { 
code immediately after the lines added in step 1.7 to background-color: #BC8796; 





set the style definition for this bar. 
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STYLE THE LOGO 

The next step is to style 
the logo that appears in the Top 
Menu. Add the “logo” class to 
specify the font to use for the 





. Logo { 





oO 


font-family: "Merriweather", serif; 








co 
company logo. Then add style . . , 
definitions rhe logo that font -wei ght : bold; The default f 
appears in the navbar. The navbar f ‘i as i ee 
logo is a hyperlink, so you will } Saale 
need to define both its normal 
and hover states. If you are unsure .navbar-brand.logo { 
what CSS style definitions are ; 
acting on an element, use the color: white; Normalstate of 
Developer Tools (see p.281) in the hyperlink 
Chrome to view the styles. } 

Hover state of .navbar-brand.Logo:hover { 

the hyperlink 

color: white ; ——— This will ensure the logo & 
remains white when the NY 
} mouse hovers over it 


29° RUN THE PROGRAM P , 


Now test the code to see if the navigation bar renders 
correctly. In the Solution Explorer window, right click on “index.html” Gi) TRAVEL-NOW 
and open the file in the browser of your choice. You can also open the 
browser and type the website's url into the address bar. In Windows, 
the url will be “file:///C:/Travel-now/index.html”. On a Mac, the url will 
be “file:///Users/[user account name]/Travel-now/index.html”. 


file:///Travel-now/index.html 


(() TRAVEL-NOW 


file:///Travel-now/index.html 








WIDE SCREEN NARROW SCREEN 





page that needs to be managed is v80" </div> closing tag, add a “container” div so 
that all the contents appear centred on the page, 


Adding a feature image (3a) CENTRE THE CONTENTS N 
The next element of the home Go to “index.html”, and after the “spacer as 


the feature image. Each page on the 


; ; regardless of the width of the screen. HTML 
website will have a “feature image” 
banner that will cover the entire width 
of the page and contains the page title. <div class="spacer v80"></div> 


<div class="container"> 


</div> 


(a2) ADD THE FEATURE IMAGE BANNER 
Now, inside the “container” div, add the feature of the website if you like. The “homelndex” and A 


image for the home page and an “h1” header with the title of | “featurelmage’” classes are used to specify the 





the page. You can even use a different image on each page background image for the home page. 
HTML 
<div class="container"> 
<div class="featureImage roundCorners homeIndex"> 
< = = Ww we > 
div class="text The “featurelmage” div The “homelndex” class specifies 
<hi1> will appear on every page the background image to be 
used for the home page 
Text that appears ____________ TRAVEL-NOW 
in front of the image 
< > 
Closing tag for the /hi1 
“featurelmage” div anaes Closing tag for X 
the “text” div J) 
</div> 
SAVE 


33 CENTRE THE IMAGE a 34 STYLE THE IMAGE TEXT — 
Open the “global.css” file and add m a Now add some code to style the text that will ) 


some styles to specify the position of the 
feature image on a page. These styles allow space in the middle of the “featurelmage” div, which 
the browser to automatically fit the image to CSS will contain the heading. 

any size of screen. Add this code to the end 

of the CSS file. 


appear in front of the image. The “text” div defines a 





.featureImage .text { 














.featurelImage { Specifies the width margin: 0; 
and height of an image Specifies the 
width: 100%; color: black; Heeret | 
position: relative; position: absolute; 
height: 400px; top: 50%; 
background-size: cover; left: 50%; Positions the text to 
start in the middle 
background-position: width: 80%; | of the page 
center; color: #000; 
Specifies the actual image file : 
} ee on the page text-align: center; 
.featureImage.homeIndex { -webkit-transform: translate 
background-image: url (-50%, -50%) ; 
(../images/ transform: translate 
feature. jpg) ; (-50%, -50%) ; 


Repositions the text so that it 
} } fits in the middle of the page 


pay irene ge AC! Y BoA be 


ADD RESPONSIVENESS 4 
The name of the website needs to be displayed at different font size, 
depending on the width of the screen. Use the “@media screen” instructions to cs 
tell the browser which definitions to apply according to the size of the screen. 








CSS 





@media screen and (max-width: 400px) { 


.featureImage .text hl { 





font-size: 22px; Size of the “hl” header at 
the minimum screen width 
} Instructs the browser to change 
the font size depending on the 
} width of the screen 


@media screen and (min-width: 401px) and (max-width: 767px) { 
.featureImage .text hl { 


font-size: 32px;—W Size of the “h1” header when 
the screen width is changing 


} 
@media screen and (min-width: 768px) { 


.featureImage .text hl { 


font-size: 80px ; ———_———_ Size of the “h1” header at 
the maximum screen width 





SAVE 


36 RUN THE PROGRAM 
Save all the files and refresh the web page in the browser 


to see what the website looks like at this point. The feature image 
and its text should resize according to the width of the screen. 


(() TRAVEL-NOW 
file:///Travel-now/index.html 


(() TRAVEL-NOW 
< file:///Travel-now/index. html 











WIDE SCREEN NARROW SCREEN 





Adding a message 

The next step is to manage the “primary message” 
section of the website. This message is a paragraph of text that 
will display the main intention of the page in a prominent font. 











ADD THE MESSAGE TEXT 
Open “index.html”. Then, within the “container” for the “featurelmage” </div>. This will » 
<div> add another <div> tag with class="primaryMessage”. contain the paragraph of text you want 
Place this new <div> immediately after the closing tag to display on the website. 
HTML 
</div> Closing tag for the 


“featurelmage” div 


<div class="primaryMessage"> 


o The paragraph tag 
We all dream of a great holiday. Contents of 
the primary 
<br /> message 


Contact us to make your dream come true! 


</p> J 
</div>—_—_—_ Closing tag for the 
“primaryMessage’ div SAVE 


|| STYLE THE MESSAGE — ADD RESPONSIVENESS 
Now go to the Ie a The message will be displayed with different 
Ash font sizes, depending on the width of the screen. Add 


é this code below the “.primaryMessage’ style definition. © 
css css 








“global.css” file and add 
some style definitions to the message. These styles 
will apply to both wide and narrow screens. 








font-size: 80px; @media screen and (max-width: 
} 575px) { 
} .primaryMessage { 
.primaryMessage { font-size: 18px; 
color: #000; RSSSCSwn SUES 
HERSUGSRONSOEORSSESRwauUUE } less than $76px wide 
text-align: center; @media screen and (min-width: 
padding: 60px 0; 576px) { 
max-width: 80%; .primaryMessage { 
} font-size: 23px; 
} | Sets the size of the font 


The width of the “primaryMessage” when the screen width 
cannot be more than 80% of the } is more than 575px wide 
parent “container” div 
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VIEW THE MESSAGE 

Save all the files and then refresh the web 
page in the browser to see if the message is rendered 
correctly. The primary message will be displayed 
immediately after the feature image, and its text will 
resize according to the width of the screen. 








(() TRAVEL-NOW (() TRAVEL-NOW 
< file:///Travel-now/index.html < file: ///Travel-now/index.html 

















We all dream of 
We all dream of a great holiday. a great holiday. 


Contact us to make your 


Contact us to make your dream come true! 
dream come true! 


WIDE SCREEN NARROW SCREEN 








Displays the message with The font size changes 
the larger font size according to the width 


of the screen 





Adding a quote 

The next element to be added is a Quote section. You 
will structure the section using HTML, and then add style 
definitions in CSS to specify the basic layout properties and 
colours. Finally, using JavaScript, you will make this section 
cycle through the quotes, making them appear one at a time. 


(sa) ADD A SCRIPT TAG 
DAY 
In the <head> section of the “index.html” file, add a <script> as QUOTE OF THE 





tag to link a custom JavaScript file to the HTML file. Add this code ; es you 

below the closing </script> tag for “app.js”. This instructs the browser “T avelling - it leav 

to include the “homes” file when the page is loading. The new custom HTML r hless hen turns 

file will be created later using JavaScript. speec : teller’ 
you into 4 story 






Ibn Battuta 





<script src="scripts/app.js"></script> 


<script src="scripts/home.js"></script> 


The “src” attribute 
points to the external 
“home,js’ file 


5.2 ADD THE QUOTE TEXT i. 
Now add the “quote” div just after closing </div> tag for items, except the first, will have an inline style 


the “primary message”. This will contain the text for all the quotes, definition “display:none”, so that when the page 











including names of the people who made them. All the quote loads, only the first quote item is visible. 
HTML 
</div> Closing tag for the 
“primaryMessage’ div 
<div class="quote roundCorners"> 
<div class="quoteItem" > 
2 AGE This tag contains 
the quote text 
The journey not the arrival matters. 
</p> 
This tag is used for applying 
<span>T.S. ELiot</ span> styles to inline elements 
</div> 
<div class="quoteItem" style="dispLay: none; "> ESSEC. 
quoteltem 
will not be 
EBa visible when 
: the page 
Jobs fill your pocket, but adventures wieeee 


fill your soul. 


</p> 
<span>Jaime Lyn Beatty</span> 
</div> 
</div> Adds a vertical height of 
40px between the “quote” 
<div class="Spacer v40"></div> div and the next element 












STYLE THE QUOTE 
Next, open the “global.css” file and 








add the style definitions for the “quote” div. -quote { 

These styles will specify the text alignment, ee : . meet iam 

padding, background colour, and text colour text-ali gn: center; ble zit ett Ea CSS 
of the quotes. Add this code immediately after nals Te SOBRE “quote” div 

the “@media screen” instructions for the paaaing. px PX; 


primary message. 


background-color: #4392F1; 
color: white; Hex code for 


light-blue colour 
Defines the vertical hei ght: 180px; 
space occupied by 


the quote section 





position: relative; 
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ADD RESPONSIVENESS 

The quote section needs to be iti : lati : ~ 
displayed at a different size, depending BeReehet a ueashieee 
on the width of the screen. Add a style } 
definition for the “quote” div that will CSS 


ly apply when th idth i ;, , 
wena. ° @media screen and (min-width: 767px) { 








.quote { 
Adjusts the vertical hei ght : 220px; 


space occupied by 
the quote section } 


POSITION THE TEXT 
Now add some 


by 
style definitions for all the -quote > .quoteltem { cs 


“quoteltems” elements, below a9 : ; The width of the “quoteltem’” 
aa eo oe These max-width: 60%; cannot be more than 60% of the Css 
will define the basic layout 


properties of all the text margin: 0; He ued tiya fod 
elements in the quotes. 





color: white; 
position: absolute;| 


top: 50%; Hl 
| _—s«~ Positions the top-left corner of 
left: 50%: the “quoteltem” aes in Ue 
middle of the parent “quote” div 





text-align: center;| 


-webkit-transform: transLate(-50%, -50%) ; 





Repositions the “quoteltem” 
np) en Oni Nels ade transform: translate (-50%, -50%) ; 
left by 50% of its width, so 
that it aligns exactly in the } 
middle of the “quote” section 


DEFINE THE FONTS : 
AND MARGINS 
The <p> element style definition = quote Item p { cs 


declares the font styles to be used for z= . on . " : : 
each quote item. It also sets the margin font-family: "Merienda One", cursive; CSS 


that appears below each paragraph. mT te : . 
Add these lines just below the code font-size: 20px; 
from step 5.5. . 

. font-weight: normal; 





Vertical space between ma regi n-bottom: 5 px ; 
the paragraph and the 


<span> element below it } 





Displays the quote 
text in a cursive font 


= ADDING A QUOTE 





INSERT QUOTATION MARKS 

Now use CSS selectors to instruct 
the browser to insert quotation marks 
automatically around the <p> element. The 

“content” definition specifies which quotation 
mark is to be inserted. 


Specifies the basic 
layout properties of 
the quotation marks 





N 
.quotelItem p:before { ces 


color: #EAC435; 


CSS 
‘content: open-quote; as EB Tt ds Instructs the 
browser to insert 
font-size: 40px; the “open-quote” 
character 





line-height: 20px; 
margin-right: 5px; 





‘vertical-align: -13px; 


} 
.quoteItem p:after { 


Hex code for the 


color: #EAC435 ; —————___ colour yellow 

content: close-quote; Instructs the 
browser to insert 

font-size: 40px; the “close-quote” 
character 


line-height: 20px; 
margin-left: 5px; 











vertical-align: -13px; Lowers the 
element by 
} 13px below 
the baseline 
STYLE THE " 
QUOTE MARKS — . 
Vourcantncueda si ledenniion: @media screen and (max-width: 766px) { 
to adjust the font size for the 
quote text and the spacing of the -quotelItem p { CSS 
quotation marks, depending on — . . : 
the width of the screen. Then, font-size: 14px; apa EEeen 
set the styling for the <span> tag 4 
that contains the name of the } 
source of the quote. 
.quoteItem p:before { 
vertical-align: -12px ;— Adjusts the vertical 
alignment of the 
} “open-quote” character 


.quoteItem p:after { 





Adjusts the vertical 
alignment of the 
“close-quote” character 


vertical-align: -17px; 


WEB TECHNOLOGIES 3 y) () ye 3 y) {| 
Responsive website 


.quoteItem span { 








color: #EAC435; Font size of the <span> 
text when the width of the 
font-size: 18px; screen is more than 766px i 
SAVE 


Bo carey ddan Instantiates the Home () function 
You will need a new custom 


JavaScript file to contain the functionality pea pO Che APE One 
required by the home page. To create this | 
file, go to the Solution Explorer window, right function Home () { {3} 
click on the scripts folder, select Add and ; 
then select Add New Item in Windows, and } 

New File on a Mac. Name the file “home.js”. Js 


Then, add a Home () function and another $ (document) .ready(function () { 
on document ready () function below 


it. This function is aJQuery command that /* Instantiate new Home class *«/ 
will tell the JavaScript Engine to wait until 

all the elements on the page have finished 

loading before running the code in the 

$ (document) .ready () function. 1): 


app.home = new Home () ; 





The “app” object has already been 
instantiated in the “app.js” file 


APPLY PROPERTIES ™ 

TO THE QUOTE This object has pee 
Just below the Home () function, add Function Home() { four properties {3} 
a property called “quoteControl” that . 

* * 
contains all the variables used by the /* Properties */ Js 
uote section to manage itself. : 
" . this.quoteControl = Contains the list of 

<div> tags with quotes 





Index of the quoteItems: null, | 
“quoteltem” div that Numberor sa? 
is currently visible currentIitem: 0O, tags with quotes 


numberOfItems: 0, 


Holds a reference to the JavaScript 
“setinterval” command, which instructs 


the JavaScript Engine to repeatedly call repea tPeriod: 5000 
the function to show the next quote ; 





interval: null, 


511 INITIALIZE THE QUOTE 
Inside the Home () function, add a method below the 


“quoteControl” declaration : IN 
to initialize the quote section. This function can be accessed as a property of the “app.home” {3} 


instance declared in te $(document).ready() function. 











Js 
Ni Sets the values of the properties contained 
pa in the “quoteControl” object and starts the 
/* Methods */ loop to show the next quote item 
this.initialiseQuoteControl = function () { 
The variable quoteItems 
/* Get all items in quote bar */ is defined as the array of 
all the <divs> that have 
let quoteItems = $(".quotelItem") ; the class "quoteltem” 
/* Set values */ 
this.quoteControL.quoteItems = quotelItems; 
this.quoteControL.numberOfItems = quoteItems. length; 
/* Initiate quote Loop to show next item */ _ Thevariable self retains 
the reference to the instance 
let self = this; of the “Home” class 
this.quoteControL.interval = setInterval (function () { 
self .showNextQuoteItem (self) ; . | 
Instructs the JavaScript function 
j - to repeat the call to the 
}, this.quoteControl.repeatPeriod) ; SH A eenaes 
} function every 5,000 milliseconds 
ANIMATE THE QUOTE q 
Now add the showNextQuoteItem() function below next quote item and make it visible. If the current quote {3 ; 
the code from step 5.11. This method will hide the current quote item is the last item in the list, then the next quote item 3 
item, and when that is complete, it will determine the index of the __ will be the first quote item in the list. 
Js 


this.showNextQuoteItem = function (self) { 
Hides the current 
/* fade out the current item */2----— — uote item 
$(self.quoteControl.quoteItems) .eq(selLf.quoteControl. 


currentitem) .fadeOut ("slow", function () { 





/* Increment current quote item counter*/ Determines the 
index of the next 
if (self.quoteControl.currentItem >= (self. quote item 


quoteControl.numberOfItems - 1)) { 


/* Reset counter to zero */ 


Ye edge ibaic LI OL. 





seLlf.quoteControl.currentItem = 0;—— Thisis the index number 
of the current quote item 
} else { 
/* Increase counter by 1 */ 
self.quoteControl.currentItem++; eee? 
one and moves to the 
} next quote item 


/* fade in the next item«/ 


Gets all the $(self.quoteControl.quoteItems) .eq(self.quoteControl. 
TYAN EL MC Ge 


currentItem) .fadeIn("sLow") ; 





This command instructs 


}); JQuery to target a specific 

quote item with the index 

} number currentItem 
CALL A FUNCTION 





Finally, add a call to the 
initialLiseQuoteControl( 
function to start cycling through 


app.home = new Home () ; 


the quote items. Add this code /* Initialize the Quote bar */ 
inside the on document oy mem Wy rH ; 
ready () function that you app.home.initialiseQuoteControl () ; 


added in step 5.9. 
}); 





Calls the initialiseQuoteControl() 
function to animate the quote items 





VIEW THE QUOTE SECTION 

Refresh the web page in the browser to see what 2 

is being rendered on screen. The “quote” div will resize @ en 
according to the width of the screen, and the quote text file:///Travel-now/index.html 
will change every five seconds. 





f= 





(i) TRAVEL-NOW 
< file:///Travel-now/index.html 
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Adding popular destinations screen, Bootstrap’s column definitions will make 








The next element to be managed is the the section appear as three side-by-side horizontal 
“popular destinations” section, which will showcase columns. Columns will appear one on top of the 
three featured holiday destinations. Within a wide other when the screen width is narrow. 
ADD THE CONTENT 
Go to the “index.html” file. Within the quote section 12 columns across the page, to group the destination ~ 
in the “container” div, add the “popularDestinations” div and items in separate columns on the screen. These 
all its contents below the closing tag for the “spacer” div. You columns automatically adjust to display correctly 
will have to use the Bootstrap grid system, which contains on any screen size. HTML 


Ww 


<div class="spacer v40"></div> 


<div class="popuLlarDestinations"> 


< e _" 2 W 
div class="heading"> “md” is a Bootstrap column 


POPULAR DESTINATIONS definition that defines how 


the columns behave when the 


: width of the screen changes 
</div> i 


<div class="row"> 
<div class="coL-md-4 destinationItem"> 
<a href="deals.html" class="subHeading"> 


The first “popular ———<img src="images/France. jpg" The ‘src’ . 
destinations” item attribute points 


class="image" /><br />France 4 to the location 
of the image file 
</a> on the computer 


</div> 


<div class="coL-md-4 destinationlItem" > — [heclass 
“col-md-4” forces 


<a href="deals.html" class="subHeading"> Mee OIUTN te 
change from a 


The second “popular <img src="images/E t.7 D horizontal lay 
destinations’ item 8 8 BYP JPS out to a vertical 


class="image" /><br />Egypt 1 layout when 


the screen is of 
</a> medium width 





</div> 
<div class="col-md-4 destinationItem"> 


<a href="deals.html" class="subHeading"> 





The third “popular <img src="images/Africa.jpg" 
destinations” item 


class="image" /><br />Africa A 


</a> 
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</div> 
Closing tag for 
27 day > MERE SB ihe ron div 
</div>—— Closing tag for the Adds a vertical height Ss, 
“popularDestinations” div of 60px between this Y 
<div class="spacer v60"></div>——— 5ection and the next 
SAVE 
ADD RESPONSIVENESS . 
Now go to the “global. font-size: 18 px: 
css” file and add style definitions . BES 
for the “destinationltem” divs. 
This will require a definition for } CSS 
narrow screens and another SED : ; 
definition for when the screen -populLarDestinations .row 
size is more than 575px wide. - : 
.destinationItem { 
text-align: center; ae Eat 
of the contents of 
} destinationItem 
Defines the size ofthe _____@media screen and (max-width: 575px) { 
bottom margin fora 
destination item depending j popul arDestinations .row 
on the width of the screen 
.destinationItem { 
margi n-bottom: 20px; Sets the space between 
: : the bottom border of 
} the destinationItem 
and the element below 
} it to 20px 
DEFINE THE FONTS _ 
Next, add the font style . . : 
seRieneiorthe Heading: .populLarDestinations .heading, 1 
and “subHeading” elements just . . . 
palew ec nde onan .popularDestinations .subHeading { ae 


font-family: "Merriweather", serif; 


} | Default font for the 
heading and subHeading 


.popularDestinations .heading { 


font-size: 30px; Specifies the style definitions for 





Defines the height between line-height: 35px; the heading in ‘normal’ state 
lines of text, which is . 
important to specify as the } 


heading can sometimes 
appear on multiple lines 


ES ADDING POPULAR DESTINATIONS 


STYLE THE IMAGE 


N 
AND SUBHEADING : : enereaser 
Teeebihesilestor thie .popularDestinations .subHeading {——— ‘Pp y 


"sybHeadine” h ink definitions for the 
subHeading” hyperlink, you = : : aahiesdnie in 
will require definitions for the font-size: 36px; : 


“normal” state Css 
“normal” and “hover” states. You 
: + SS RBS HA Cadeiisr 
will then instruct the browser color: #345995; 


dark-blue colour 
to display the image at the 
maximum width available to it. } 





.popularDestinations .subHeading:hover { 


The text is not underlined 
when the mouse hovers over it 


Sets the colourof______———S—U"’- COLOr: #D7263D; 
the hyperlink to red 





text-decoration: none; 


Defines the “hover” state 
when a mouse moves 
} over the subHeading 


.popularDestinations .image { 


Displays the image at width: 100%; NS 
100% of the width NY 
available to it } 
SAVE 
RUN THE PROGRAM 


Save the file and then refresh the page in the browser. The : 
popular destinations section will resize according to the width of (i) TRAVEL-NOW 


the screen. All the destination items will be displayed horizontally file: ///Travel-now/index.html 
if the screen is wide, and vertically if the screen is narrow. 


In awide screen, the In a narrow screen, the 
destinationItems destinationItems POPULAR DESTINATIONS 


appear as a horizontal list of appear as a vertical list of 
images with hyperlinks images with hyperlinks 


(\) TRAVEL-NOW 


file:///Travel-now/index.html 


POPULAR DESTINATIONS 


France Africa 


Africa 





WIDE SCREEN NARROW SCREEN 
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Adding last minute deals 
The next element is the “last minute deals” section. This 
section will use a carousel to show a slideshow of two images. Each 
Slide is a hyperlink that will take the user to the “deals.html” page. 
Bootstrap contains all the functionality required to create a carousel. Sas 


(71 DEFINE THE ELEMENTS OF THE CAROUSEL 
In the “index.html” file, just below the “spacer v60" ars 








</div> closing tag of the popular destinations section, add 
the “featuredDeals” div and all its contents. This will include 
a header for the section and an ordered list of place markers HTML 
that will show users which slide they are currently viewing. The “h2” header contains 

the name of the section 





<div class="Spacer v60"></div> 
<div class="featuredDeals"> 


<h2 class="heading">LAST MINUTE DEALS</h2> 





Thetwo <div id="dealsCarouseL" class="Carousel slide " data-ride= 
attributes - “id” 


and Gane "cCarouseL"> These classes are 
- are use ee 7 ; ; i used to style the 
manage the <ol class="carousel-indicators"> § contentsofthe <div> 


behaviour of 


the carousel <li data-target="#dealsCarousel" data-slide-to= 


"0" class="active"></Li> 
These classes are ___| 


used to style the <li data-target="#dealsCarousel" data-slide-to= 
place-marker indicators 
W 1 W >< / 1 1 > 





</ol> 


</div> 


</div> 





add the “carousel-item” content for the slides. Make sure 

to add the class “active” to the first carousel item. This will 
instruct the JavaScript Engine to start the slideshow on that 
particular item. When the next slide shows, the “active” class 


The slideshow starts 
with this carousel item 


Closing tag for the “carousel- 
indicators” ordered list 


e < / O l ? 


<div class="carousel-inner"> 





<div class="carouseL-item active"> 


<a href="deals.htmL"> 











<img class="d-block w-100 roundCorners" 


src="images/Serengeti_Safari.jpg" 


Provides 
alternate text for 
an image if the 
image cannot 





alt="Serengeti Safari"> A 


<div class="carousel-caption d-block"> 


be displayed <h3>SERENGETI SAFARI</h3> 
</div> 
</a> 
</div> 


<div class="carousel-item"> 
<a href="deals.html"> 
<img class="d-block w-100 roundCorners" 
src="images/Taj_Mahal. jpg" 
alt="Taj Mahal"> d 





<div class="carousel-caption d-block"> 
<h3>TAJ MAHAL</h3> 
</div> 
</a> 
</div> 


</div> 





Defines the header 
of the second slide 


Closing tag for the 
“carousel-inner’ div 


[72] ADD THE CONTENTS 
Below the “carousel-indicators” closing </ol> tag, will be removed from the first carousel item and will be . 


added to the next carousel item. You also need to add 

two classes -“d-block” and “w-100” - to the <img/> tag to 

specify the size of the images. There are two carousel HTML 
items being added here, but you can add more if you like. 


Instructs the browser 
to display the image 
asa “block” element 


Defines the header 
of the first slide 


Contains the second 
slide of the carousel 


Instructs the browser to 
scale the image to 100% 
of the width available to 
it. The size of the slide 
increases according to 
the width of the screen 


Adds a caption 
to the slide 
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CREATE THE BUTTONS 

Now add the “next” and “previous” buttons for the 
carousel so that the user can move forward and backward 
through the slideshow. Type this code after the “carousel-inner” 
</div> closing tag from step 7.2. 





The “href” attribute is used 
by Bootstrap to manage the 
carousel button behaviour HTML 





The <a> tag defines the 


..- Baeaue button as a hyperlink 





<a class="carousel-control-prev" href="#dealsCarouseL" 





role="button" data-slide="prev"> The “sr-only” 
class specifies 
<span class="carousel-control-prev-icon" that the <span> 
element will 
aria-hidden="true"></span> only be visible 
onascreen- 
<span class="sr-only">Previous</span> reader client 
</a> 


<a class="cCarousel-control-next" href="#dealsCarousel" 


roLe="button" data-sLide="next"> 


<span class="carousel-control-next-icon" This <span> 
element will not 

aria-hidden="true"></span> be visible if the 
client is a normal 

<span class="sr-only">Next</span> web browser 


<) ae 


7) ADD A HYPERLINK 
Next, within the “featureDeals” div, add a call-to-action hyperlink > 





below the “dealsCarousel” </div> closing tag. This hyperlink will take the user Name of the call-to-action 

to the “deals.html” page. Then, add a “spacer v60" div to include vertical button that links the home 

distance before the next element on the web page. page to the deals page HTML 
</a> 


Closing tag for the 
Ea To yp EL EEE D Velee ts Celta ite oll 


<div class="Link"> 





<a href="deals.html">VIEW ALL LAST 
MINUTE DEALS</a> 





</div> 
Closing tag for the 
</div> “featureDeals” div Adds a vertical space Ss 
of 60px between this y 
<div class="spacer v60"></div>——————_ clement and the next 


SAVE 





[75] ADD RESPONSIVENESS 76 STYLE THE TEXT 
As the carousel functionality is already built in 1 N ces 


ext, define the styles for the 
“carousel-caption” element that contains the 
“h3” header text in the slide. Add this code just 


to Bootstrap, you will only need to define the font styles 
for the text you want to display. Start by adding the style 





@media screen and (max-width: 
575px) { 
.carousel-caption h3 { 


font-size: 24px; 


definitions for the “h3” element in the “global.css” file. CSS after the code from step 7.5. CSS 
width: 100%; Sets the font size for .carousel-caption { 
the header when the 
} screen is narrow ma rgi n: 0; 


color: black hae The “h3” header will 
appear in black 

position: absolute; 

top: 50%; 


left: 50%; 


Positions the top-left corner 
of the “carousel-caption” to 
the middle of the parent 


Sets the font size for : . . a 
} the header when the width: 80% ? 
a 
} ares slated color: #000; Centre aligns 


the contents 


@media screen and (min-width: text-align: center ;— ontheslide 
576px) { -webkit-transform: translate 
.carousel-caption h3 { (-50%, -50%) ; 


font-size: 40px; transform: translate 





} (-50%, -50%) ; 
Repositions the caption 
} } to centre it in the 
“carousel-item” div 
STYLE THE HYPERLINK 


Finally, add styles for the “View all 
last minute deals” hyperlink that appears just 
after the carousel. This will require definitions 


.featuredDeals .link { 





text-align: right; 


for both “normal” and “hover” states. CSS 
.featuredDeals a { Right-aligns 
; ; the hyperlink 
Sets the “normal”_________+_+—==s=s=s¢olor: #000; contained in 
state colour of the the “link” div 
hyperlink to black } 


.featuredDeals a:hover { 
text-decoration: none; 


Sets the hyperlink “hover” color: #D7263D 2 ce 


state colour to red 





SAVE 
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TEST THE PROGRAM 

Save all the files and then refresh the page in the browser to 
see the updated website. The carousel will animate the slideshow and 
the text will resize according to the width of the screen. You should be 
able to move forward and backward through the slideshow using the 
next and previous buttons. 
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file:///Travel-now/index.html 


(() TRAVEL-Now 


file:///Travel-now/index.html 


LAST MINUTE DEALS 


LAST MINUTE DEALS 


SERENGETI SAFARI 











SERENGETI SAFARI 


— = 
VIEW ALL LAST MINUTE DEALS 








NARROW SCREEN 


— 


VIEW ALL LAST MINUTE DEALS 








Click this button to move 
WIDE SCREEN through the slideshow 





Adding the copyright 


fear DEFINE THE COPYRIGHT 
The last element of the home The “copyright” div simply contains a as 





page is the “copyright” section. This copyright notice with the specified year. Add Links the footer 
‘ll taj reat eh th ant this after the “container” </div> closing tag to the index page 

Me a Saeed bee Mee : ne on Ee) towards the end of the “index.html’ file. of the website HTML 

text. Just like the navigation bar, the 

footer will also be repeated on every 


page of the website. </div> Closing tag for the 
“container” div 








<div id="copyright"> 


<div>&copy; 2020 <a href="index. 
HTML entity.“ >] 

forthe html" class="Logo">TRAVEL-NOW 
copyright 

symbol </a></div> 





; The company logo 
</div> 


</body> 








STYLE THE COPYRIGHT 


: iN 
Go to the “global.css” file to : : 
define the “copyright” div. Then, add color: #D7263D; ce 
styling for the hyperlink that appears in ' 
the “Copyright” section. This will require CSS 
definitions for the “normal” and “hover” , 
states. Type this code just below the code #COpYr i gh t { 


added in step 7.7 and save the file. ; 
. text-align: center; 





background-color: #345995; Sets the 
colour of the 
Defines the height of color: white; footer to blue 
the container with the 
copyright information hei gh t: 58 px; 





padding-top: 18px; 


Sets the font size of 





the copyright text font-size: 16px; 
#copyright a { 
color: white ;———— — &etsthe 
The cursor is colour of the 
displayed as a pointer ___________________cursor: pointer; Sets 
} state 


#copyright a:hover { 


Colour of the hyperlink _____+—ssssSsss—_.¢color: #D7263D ; 
in “hover” state 


Hex code for 
the colour red 








text-decoration: none; ee 
SAVE 
RUN THE PROGRAM 
Save all the files and then refresh the page in the : 
browser. The “Copyright” section will display at the bottom @ Bee ad 
of the page for both wide and narrow screens. file:///Travel-now/index.html 


(() TRAVEL-NOW 


file:///Travel-now/index.html 


VIEW ALL LAST MINUTE DEALS VIEW ALL LAST MINUTE DEALS 
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Creating a template and buttons that are used throughout the site. 
Almost all websites use an HTML template to In order to achieve a standard look and feel for 
add CSS, JavaScript, and common graphical elements this project, you will create a “template.html” 


to their pages. The template usually includes common file and then modify it for all the subsequent 
elements, such as a navigation bar, menus, footers, pages on the website. 


Ol CREATE AN HTML FILE . 
Start by creating a new HTML file, just as you did <head> tag from the “index.html” file and paste its 


in step 1.2 of this project. Name this new file “template. contents into the <head> tag of the “template.html’ file. 
html”. Visual Studio creates the file with the minimum code Replace the text in the <title> tag with some asterisks 
required for a valid HTML page. Now copy the entire (*) and remove the <script> tag for “homejs”. HTML 








<meta name="viewport" content="width=device-width, 


initial-scale=1, shrink-to-fit=no"> 





<title>******</titLe> Replace the asterisks with the correct page title 
when you use the template to make a new page 


<script src="scripts/app.js"></script> 
Delete this entire line of code 


<script src="scripts/home. js"></script>——— from the "template.html’ file 


9.2 COPY ELEMENTS TO THE TEMPLATE PAGE 7 
Now copy the entire <nav> tag from the “index.html” “index.html”. Remove the “active” class from the 


file and paste its contents into the <body> tag of the “template. — <li class="nav-item”> and the “<span class="sr- 
html” file. Within the <nav> tag, find the <a> hyperlink to only”>(current)</span>” class from the hyperlink. 
HTML 


...<uL id="topMenu" class="navbar-nav mr-auto"> 


Remove the “active” 
class from this line 





<li class="nav-item"> 





<a class="nav-Link" href= Remove the “sr-only” span 
from this line as it indicates 
"index. htmL">Home</a> the active menu item for the 


screen reader 


</li> 


9.3 ADD A CONTAINER TAG 
ul WW . & 
Next, add a “spacer” and </nav> Closing tag for 
a “container” div after the </nav> the “navbar” div 
closing tag in the “template.html” ‘ _u ” ' 
file. The spacer will add a vertical <div class="spacer v80"></div> 
gap between the navbar and the 


next element in the template. 


HTML 
<div class="container"> 


</div> 


Contains all the HTML 
elements on the page 


SS CREATING A TEMPLATE 


94 EDIT THE HEADER . 95. ADD THE CONTENT . 
Copy the “featurelmage” div from the Within the “container” div, add a “spacer” div 





“index.html” file and paste its contents inside the below the “featurelmage” </div> closing tag. Then add 
“container” div in the “template.html” file. Replace a “pageContent” div with a row of asterisks inside it. 
the text in the “h1” header with asterisks. HTML HTML 


<div class="Spacer v60"> 
<h1> 


Replace the asterisks KEKE 
with the correct 
header text later on </h1> 


</div> 





<div class="pageContent"> 


KRAKKKKKKKKKKKKKKE 
</div> 
</div> 





Closing tag for the 


</div> u mh Bie 
featurelmage’” div 


Indicates the location of the content for 
each page that is created from the template 


9.6 ADD THE COPYRIGHT N 
Finally, add another “spacer” </div> Closing tag for the 
div after the “container” </div> closing “container” div 


tag. Then, copy the “copyright” div <div class="Spacer v60"></div> 








from the “index.html” file and paste its HTML 
contents into the “template.html’” file. . — . - 
Save the file. <div id="copyright"> 
<div>&copy; 2020 <a href="index. 
The copyright text is copied html" class="Logo">TRAVEL-NOW</a> 
onto the template page 7 
</div> aL 
</div> = 
SAVE 


97 RUN THE PROGRAM 
Now, open the browser and type the url for “template.html’” 


into the address bar. The url will be “file:///C:/Travel-now/template. 
html” in Windows and “file:///Users/[user account name]/Travel-now/ Asterisks will apPpearin 
template.html” on a Mac. place of the page title 


(i) (i) s+ 


file:///Travel-now/template.html file:///Travel-now/template.htm1l 
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Creating a new page 
In this section, you will create the “last minute 
deals” page using the template page created earlier. 
The new page will display a table of items that will 
be styled using Bootstrap’s column definitions. 


10.1 ENTER THE PAGE TITLE ™ 
First, you need to make a copy of the template page. In click on this file and select Rename to change 








the Solution Explorer window, right click on “template.html” and its name to “deals.html”. Open the “deals.html” 
select Copy. Then, right click on Travel-now and choose Paste to page and replace the asterisks in the <title> tag 
create a copy of the template page “template(copy).html”. Right with the page title. HTML 


<meta name="viewport" content="width=device-width, 
Find the <title> tag 


initial-scale=1, shrink-to-fit=no"> insigetne SHEA? 
tag and enter the 
<titLe>LAST MINUTE DEALS</title>—27 Hi 7777s Pz title 


10.2 UPDATE THE CODE 7 
Inside the <nav> tag, find the <a> hyperlink to “deals.html”. Add the 


class “active” to the <li> tag that surrounds the “deals.html” hyperlink and 
then append <span class="sr-only”>(current)</span> to the hyperlink content. 


HTML 

vine Add the “active” class 
to indicate the current 

Se ae ee ea eee occa BESS BBB S SS SSSR ESSE SER 828282888 _ page inthe lop Menu 


<a class="nav-Link" href="deals.htmL">Deals 


<span class="sr- -only"> (current) </span></a> 
es § [he “soniy” span is 
</li> not visible in a normal 
web browser. It indicates 
the current page fora 
screen reader client 











ADD THE CONTENT q 
sense ins <div class="container"> 
div, replace the “homelndex 
class with the “deals” class to ; 0 
< = 
display a different feature image div class="featureImage HTML 
on the deals page. Then, go to " 
the “text” div and update the roundCorners deals"> 
content for the “h1” header. 2qTGREUSSSSneeREne Reslcathe 
asterisks with 
<h1> the header 
Replace “homelndex” text for the 
with “deals” in the LAST MINUTE DEALS deals page 


“deals.html” file 


</h1> 


UPDATE THE PAGE 





; iN 
CONTENTS . " " This header contains 
< = > 
Go to the “pageContent” div and div class="pageContent the page title 
replace the asterisks inside it with 
oie met <h2>LAST MINUTE DEALS</h2> at 


and anew “lastMinuteDeals” 


div, as shown here. =a r> 
Creates a horizontal rule <div class="Spacer v20"></div> 


between the “h2” header and 


the table of “deal” items <div class="LastMinuteDeals"> 
This <div> contains the various __ eit /div> 


“deal” items arranged in rows 


105 ADD THE FIRST DEAL . 
Now add the first “deal” item inside the Bootstrap “columns”. These columns will appear 


“lastMinuteDeals” div. Each “deal” item will be a horizontally when the screen width is wide, and 
hyperlink that contains a Bootstrap “row” and four __ vertically when the screen width is narrow. 


HTML 
...-<div class="LastMinuteDeals"> 
Baer e ee eee ee ee ae ee SBR SSSSSSSeeeeeseesees {his outer <div> acts asa 
container for the hyperlink that 
<a href="deals.htmlL"> surrounds the row contents of 


the first “deal” item 


<div class="row"> 
There are four Bootstrap 











= ‘ 
<div class="col-sm name"> eons eae THOM 
Taj Mahal Content in the first 
Bootstrap column - 
</div> name of the destination 
<div class="coL-sm depa AEE Content in the second 
Bootstrap column - 
21 July 2020 date of departure 
</div> 
<div class="col-sm length"> Content in the third 
Bootstrap column - 
10 days duration of the trip 
</div> 
<div class="col-sm price" > OContentin the fourth 
Bootstrap column - 
$1000 price of the deal 
</div> 
</div> 


</ae 


</div> 
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ADD THE SECOND DEAL 
Below the first “deal” </div> closing tag, add the second 
“deal” item. You can add as many “deal” items to this page as you like, 
but make sure to add an equivalent number of “carousel-items” to 
the “featuredDeals” div in the “index.html” file (see pp.327-29). 








ne </div> 





<div class="deal"> 
<a href="deals.htmL"> 
<div class="row lLast"> 
<div class="col-sm name"> 
Serengeti Safari 
</div> 
<div class="col-sm depart"> 


27 July 2020 





</div> 

<div class="col-sm length"> 
7 days 

</div> 


<div class="col-sm price"> 


$800 
</div> 
</div> 
</a> 
</div> 
Closing tag for the 
</div> “lastMinuteDeals” div 


<div class="spacer v60"></div> 


DEFINE THE 

BACKGROUND IMAGE 
Now go to the “global.css” file and 
define the “featurelmage” that will 
appear as the background image 
for this section. Type this code just 
below the code added in step 8.2. 


.featureImage.deals { 


deals.jpg) ; 


background-image: url(../images/ 


& 





HTML 


Closing tag for the 
first “deal” div 


Container for the 
hyperlink that surrounds 
the row contents of the 
second “deal” item 


Contents of the 
second “deal” item 
placed in individual 
Bootstrap columns 


Add a vertical 
S b iS 
pace between ap 
this item and Ww 
the next 
SAVE 
oO 


CSS 


Sets anew 
feature image for 
the deals page 





STYLE THE ROW 

Next, define the styles for 
the rows that will apply to each “deal” 
item. Specify that the row with the . : . | 
class last’ Fail have a different padd mnsr bottom: 15px 4 CSS 
border, and the row should change 2s . 
colour when the mouse hovers Margin: 0; 


above it. Add this code below the ‘ : . Sets the width 
code added in the previous step. border-width: 1 px 0 0 0; of the border 


surrounding 


een solid; aoa 
Seaneciheen leone border-color: #888; ————ss—s—ss—<C<;73 7}PCStSSCSScets thir 


; border colour 
row’s four borders } 


.LastMinuteDeals .row { 





to ashade 
of grey 
.LastMinuteDeals .row.last { 
Sets a different border _______________}order-width: 1px 0 1px 0: 
width for the last row ; 
} 
.LastMinuteDeals .row:hover { 
background-color: #BC8796;-—————— "ex code for 
the colour 
color: white; ee 
} 


Changes the text colour from 
dark grey to white when the 
mouse hovers above the row 


109 ADD RESPONSIVENESS TO THE ROWS 
The rows must appear vertically when he a 





the screen width is narrow. To do this, instruct the Defines a different padding for 
browser to apply a different padding definition to the row when the width of the | 
the “row” divs. screen is less than 576px CSS 


color: white; 
} 
@media screen and (min-width: 1px) and (max-width: 575px) { 
.LastMinuteDeals .row { 


padding: Opx 15px 20px 15px; 


Adds spacing between the content 
and the container boundary 
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STYLE THE HYPERLINK 











ae A 
Now add style definitions : : 

for the “link” div that contains the -LastMinuteDeals div { 1 
hyperlink for the rows, including 2 ‘ i 
the “normal” and “hover” states text-align: left; CSS a 
for the anchor tag. \ 

.LastMinuteDeals a { ake 

norma 
color: #333; out 
} 
Defines ___________ ]astMinuteDeals a:hover { 


“hover” state 


text-decoration: none; 


color: white; 














ALTERNATING THE . 
ROW COLOURS . z =) Ae 
Siseaitie ieee Elmers .LastMinuteDeals .deal:nth-child(odd) { ces 
visual by adding styles that alternate background-color: #COCOCO; Sets the colour 
the background colour of the “deal of every CSS 
div. Use the “nth-child(odd)’” and odd-numbered 
“nth-child(even)” selectors to specify } row to silver 
which deal divs qualify for the . ‘ 
Sedendioe. .LastMinuteDeals .deal:nth-child(even) { 
Sets the colour of background-color: #D3D3D3; 
every even-numbered 
row to light grey } 
ADD RESPONSIVENESS TO THE COLUMNS 
Now add styles to define the Bootstrap columns. . 
Specify the styles for both wide and narrow screen widths, Sets the spacing between 
then add a style definition for the name column so that the the content and the 
“name” field appears in a bold font. Then, save the file. column boundary CSS 
.LastMinuteDeals .col-sm { 
padding: 15px Opx Opx 15px; Defines a different padding for 
: the column when the width of 
margin: 0; the screen is less than 575px 


} 
@media screen and (min-width: 1px) and (max-width:575px) { 


eS CREATING A NEW PAGE 


.LastMinuteDeals .col-sm { 


padding: 15px 15px Opx 15px; 


} 


The “name” column text 





.LastMinuteDeals .name { 


font-weight: bold; 


displays in bold font 


SAVE 


10.13 RUN THE PROGRAM 
Open the browser and type the url for “deals.html” into 


the address bar. The url will be “file:///C:/Travel-now/deals.html” in 
Windows and “file:///Users/[user account name]/Travel-now/deals. 
html” on a Mac. You can also refresh the “index.html” page in the 
browser and then select “Deals” on the navigation bar to see what 
this page looks like. 


(() TRAVEL-Now 
< file:///Travel-now/deals.html 


LAST MINUTE DEALS 


Taj Mahal ZyulyeZ026 10 days 


Serengeti Safari 27 July 2020 7 days 


WIDE SCREEN 


yaa i» 
£, 
4 


# 


LAST MINUTE DEALS. 





(i) TRAVEL-NOW 


file:///Travel-now/deals. html 


LAST MINUTE DEALS ) 


Y 


i> 42 
; > 


y 
y 
“a \ \ 
y, 
7 


LAST MINUTE DEALS 





Taj Mahal 
21 July 2020 
10 days 
$1000 


Serengeti Safari 
27 July 2020 

7 days 

$800 





NARROW SCREEN 
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~) Hacks and tweaks 





Google fonts 

This project uses Google Fonts (https://fonts.google.com/) to provide the 

text fonts. You can explore this library and use different fonts and icons Updated line of code 
to enhance the look of your website. You can even go to Google Material in the <head> tag with 
Icons (https://material.io/) and search for more options for a favicon. the new font names 


<link href="https://fonts.googleapis.com/css?family= 


Suez+One|Oswald|Niconne" rel="stylesheet"> 


INDEX.HTML 


font-family: "Suez One", serif; 


Update the fonts in the comment 
section and use them wherever 


font-family: "Niconne", cursive; | yee at ede gee 5 





font-family: "Oswald", sans-serif; 





GLOBAL.CSS 


(() TRAVEL-NOW 


file:///Travel-now/index.html 


The font “Oswald” is used 
for the “navbar” items 


The font “Suez One” 
is used for the 
“featurelmage” text 














Bootstrap SASS 

This project points to a Content Delivery Network (CDN) version 

of the CSS file, which contains all the default styles used by Bootstrap. 
While programming, you will need to override these default styles 
with your own style definitions. To avoid doing this every time, you 
can simply modify the default Bootstrap files so that they produce 
your custom styles without the need to override them. This can be 
achieved by downloading the Bootstrap source files, editing the SASS 
variables (variables that define a value and can be used in multiple 
places), and compiling the final CSS file. 








PayPal “Buy Now” buttons 


It is quite simple to allow users to make payments on your website. You 

can do this by adding a PayPal “Buy Now” button to the deal items on the 
“deals.html” page. To receive money via PayPal, it is necessary to opena 

PayPal account and verify your bank account details. The email address that 

you register as the login for your PayPal account will be used to identify you 





as the intended recipient of the payment. The code below creates a button 
that allows users to buy a deal. Clicking on the button will redirect users to This form allows the user 
a secure page on the PayPal site, where they can make the payment. to make a payment to the 


...<div class="col-sm price”> 


$1000 


</div> 


<div class="col-sm buy" 


Closing tag for the 
“col-sm price” div 


> Content in the fifth Bootstrap 
column - “Buy Now” button 


Travel- Now website via PayPal 





<form method="post" target="_blank" action= 


"https://www.paypal.com/cgi-bin/webscr"> Email address 
of the PayPal 
<input type="hidden" value="_cart" name="cmd" /> account that 


receives the 


<input type="hidden" value="yourpaypalemai Laddress — Payment 


@exampLe.com" name="business" /> 


<input 
<input 
<input 


<input 


name="item_name_1" /> 


<input 
<input 
<input 
<input 
<input 
</form> 


</div> 


Clicking this input button submits 


type="hidden" 
type="hidden" 
type="hidden" 
type="hidden" 


type="hidden" 
type="hidden" 
type="hidden" 
type="hidden" 
type="submit" 


the form data to the PayPal url 


name="upLoad" value="1" /> 
name="charsetmm" vaLue="US-ASCII" /> 
value="1" name="quantity_1" /> 


valLue="Taj Mahal" — The name of 
the item being 


purchased will 
be passed to 


value="1000" name="amount_1" />_ thePayPal page 
value="0" name="Shipping 1" /> 
value="USD" name="Currency_ code" /> 
value="PP-BuyNowBF" name="bn" /> 


value="Buy Now" class="roundCorners" /> 





This class defines the shape 
of the “Buy Now” button 
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(() TRAVEL-NOW 
file: ///Travel-now/deals.html 


The button appears in the fifth 
LAST MINUTE DEALS column. Try styling it yourself 


Taj Mahal 21 July 2020 $1000 Buy Now 


Serengeti Safari 27 July 2020 $800 Buy Now 





Web page templates 

A website usually has a common template that is repeated 

on every page of the site. This template includes links to the ¢) TRAVEL-NOW 

CSS files, JavaScript files, and the common HTML elements, file:///Travel-now/index.html 

such as the header and footer elements that appear on each 

page. Unfortunately, there is no way to employ a template 

using only HTML and JavaScript. You would need to use a 

server-side language, such as C# MVC or Python Django 

to inject the header and footer into each page automatically. 
This project also uses a template that is used to create the 

other pages of the website. It will be very difficult to maintain 

this process if there are a lot of pages. Explore the “layout file” 

concept in C# MVC and the “template inheritance” feature 

in Python Django to solve this problem. 


CONTACT US 


Try creating this page using the 
concepts from a server-side language 


CONTACT US 
TELEPHONE 


EMAIL 


ADDRESS 





Other programming 
languages 


Every profession has its own vocabulary and ways to 
describe common problems and solutions. Programming 
languages were developed to help humans communicate 
with computers. Most languages are designed for a specific 
task or domain, but are often adapted for other purposes. 








Grouping programming languages Programming languages are also grouped into families, 
Human languages are grouped into families (such and often borrow words and structures from each 

as Germanic or Dravidian) that use similar alphabets, other. For example, C, C++, Objective-C, Java, C#, Go, 
vocabulary, and structures. If you know one language and Swift are all related, so developers who know one 
in a family, it is easier to learn others. of them can learn the other languages more easily. 


ee oe 





Languages for scripting Languages for systems 
Scripting languages are usually System languages are usually 
designed to create “scripts”, or short designed for large, complex 
programs, often written to software systems, such as 
automate tasks that might otherwise operating systems, compilers, 
be done manually. These languages databases, and office applications, 
were designed for a specific where speed, efficiency, and 
purpose, such as Perl for report reliability are important. These 
handling and VBA for scripts in languages, however, can seem 
Microsoft Office. Popular scripting cumbersome for simple programs. 
languages include JavaScript/ Popular systems languages include 
TypeScript, Perl, PHP, Python, C/C++, Objective-C, Java, C#, 
and Ruby. Go, and Swift. 


101100011010101 
010011001010110 
101100011010101 
010011001010110 





OPERATING 
(0) SYSTEM & 


DISK PACKAGE 
DEFRAGMENTER MANAGER 





Languages for data 
Some languages are designed to work with 
large sets of data. The data might come 
from experiments, monitoring systems, 
sales, simulations, and other sources in 
science, engineering, business, education, 
or other areas. People may want to process 
this data to reduce noise, analyse trends 

or patterns, and compute statistics. 
Languages to manipulate and 
analyse data include APL, 
MATLAB, and R. 









Languages for special purposes 

some programming languages are designed to solve 
specific problems, and might not be useful in other 
areas. PostScript, TeX, and HTML describe the 
content and layout of pages with text, images, and 


LICSS, POST. 
rok G RAPH/- *e, 
a q DATABASE 
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APL FOR 
DATA 
HANDLING 


MATLAB/ 
OCTAVE FOR 
NUMERICAL 
COMPUTATION 








S/R FOR STATISTICAL 
COMPUTING 





other information. SOL is used to manage 
databases. Maple and Mathematica are used 
for symbolic mathematics. LISP and Scheme 
are useful for Al (artificial intelligence). Prolog 
is used for logic programming. 
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-—} EARLY PROGRAMMING LANGUAGES 


Early programming 
languages 

There are other widely used 
languages, some with a long 
history. Fortran was created 

in the 1950s for scientific and 
engineering applications. COBOL 
was created around 1960 for 
business applications. BASIC was 
an easy language created in the 
mid-1960s for students. Pascal was 
created around 1970 to encourage 
structured programming practices, 
and was widely used in education. 
Ada was created around 1980 to 
reduce the number of different 
languages used across the US 
Department of Defense (DoD). 





FORTRAN FOR SCIENCE COBOL FOR BUSINESS 





a 
ww 
— 





PASCAL FOR EDUCATION ADA FOR MILITARY 
Visual languages messages. Such languages are often designed for 
In visual (or block-based) languages, programs are non-programmers in specific areas, such as education, 
created graphically rather than with text. For example, multimedia, and simulation. Popular visual languages 
a user might drag elements into position, connect include Blockly, Alice, and Scratch in education, and 
them, and then type in number values or text Kyma, Max, and SynthEdit for music. 
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Other programming languages their careers. The table below lists some of these 

There are hundreds of programming languages, and programming languages, with information on 

most developers are proficient in a few, familiar with when they were first developed, the lead creator, 

more, and expect to learn new languages throughout and a brief summary of key ideas and major uses. a= 


POPULAR PROGRAMMING LANGUAGES 


C (1972) Designed to be concise, portable, and to generate efficient machine code. It is 
Dennis Ritchie widely used for operating systems, compilers, interpreters, and large applications. 
Many other languages have adapted features and syntax from C. 


C++ (1983) Designed to add object-oriented features to C (in C, “C++” adds 1 to the 
Bjarne Stroustrup variable c). Widely used for operating systems, compilers, interpreters, 
and large applications. 


Java (1995) Designed to be an object-oriented language based on C and C++. Java was 

James Gosling meant to be a “write once, run anywhere” programming language - code written 
on one type of computer can be run on other types. Widely used for desktop 
applications and browser-server applications. 


Python (1991) Designed for readability, and to support multiple programming styles. Uses 

Guido van Rossum a small core language with libraries that add more specialized functions. 
Widely used in web applications, scientific computing, and for scripting in 
other software products. 


PHP (1994) Designed for web development (“PHP” originally meant “Personal Home 
Rasmus Lerdorf Page”), where it is widely used. 

JavaScript (1995) Designed to create interactive web pages and applications, where is it widely 
Brenden Eich used. JavaScript is also used in some web servers, so that a web application 


can use the same language in the browser and server. 


Fortran (1950s) Designed at IBM (International Business Machines Corporation) for scientific 
John Backus and engineering applications, which often involve many numeric calculations. 
Named from “FORmula TRANSslation”. 


COBOL (1959) Designed for data processing, COBOL was based on the earlier work of Grace 
Hopper. It was supported by the US Department of Defense, which led to its 
wider adoption. Named from “COmmon Business-Oriented Language”. 


BASIC (1964) Designed to be easy to use for students in many fields, not just science and 
John Kemeny and Thomas Kurtz mathematics. It expanded into Microsoft Basic (1975) and Visual Basic (1991). 
Named from “Beginner's All-purpose Symbolic Instruction Code”. 


Ada (1980s) Designed for embedded and real-time systems and to reduce the number 
Jean Ichbiah of languages used across the US Department of Defense (DoD). Named after 
Ada Lovelace, often described as the first computer programmer. 


SQL (1970s) Designed to edit and search databases, especially “relational databases” (when 
Donald Chamberlin and Raymond Boyce data is stored in tables that are related to each other in various ways). SQL is 
short for “Structured Query Language”. 


Glossary 


algorithm 

A sequence of steps or instructions that 
complete a task or solve a problem. In 
programming, an algorithm often includes 
repeated steps, decisions between two 

or subsequences of steps, and steps that 
refer to other algorithms to do subtasks 

or solve subproblems. 


API (Application Programming Interface) 
A set of definitions that programmers 

can use to access another system without 
having to understand all of its details. The 
definitions might include functions, classes, 
data structures, and data values. Originally 
named because it defines an interface for 
programmers to develop applications using 
an underlying system. See also library. 


array 
A collection of items stored in adjacent 
locations in the system’s memory, using 
a single name and a numeric index. 

The index usually starts at 0. Often, 

all elements in the array have the same 
type. For example, all integers, or all 
strings of characters. An array is one 
way to store a list. See also list. 


attribute 

A specific piece of information associated 
with a data object. For example, an image 
would have attributes for height and width, 
and a sound would have attributes for 
length and sampling rate. 


binary 

A numbering system, used by computers, 
that has only two digits (0 and 1), not the 
usual decimal system with ten digits (0 to 9). 
In binary, each position is two times the 
position to its right, rather than ten times in 
decimal. For example, 101101 = 1*32 + 0*16 + 
1*8 + 174 + O*2 + 1*1 = 45. 


bit 

Shortened from “binary digit”, it is the basic 
unit for information or communication. 
The value of a bit can be either 0 or 1. Thus, 
an eight bit device mostly uses storage 
elements with 8 bits, which can store 

2° = (256) different values. 


block element 

An HTML element that breaks the flow 
of text and changes the layout of the 
page. For example, paragraphs (<p>), lists 
(<ul>, <ul>, <li>), and tables are all block 
elements. See also inline element. 


branching statement 

A program statement that chooses one 

of several possible paths or sets of steps, 
usually based on the value of an expression. 
For example, an “if-then-else” statement 
takes the “then” path if an expression is true, 
and the “else” path if an expression is false. 
Also called a conditional statement. 


Boolean 

A value that can be either true or false. 
Named after George Boole, who defined 
a logic system based on such values. 


bug 

A defect, or an error, in a program or 
other system that prevents it from 
working correctly. The term was used in 
engineering long before computers, but 
is often associated with a story told by 
Grace Hopper about a moth stuck in an 
early computer, causing wrong results. 


call 

A program statement that causes the 
computer to run another function, and 
return to the original function when done. 


carousel 

A software component in Bootstrap 
that cycles through a set of elements, 
like a slideshow. 


CDN (Content Delivery Network) 

A network of servers spread across different 
places that can deliver the same content 
(data or services). For example, when a web 
browser loads content for a page, the CDN 
can deliver content from nearby servers, 
which reduces the wait time and the 
network traffic. 


child object 

An object created from a prototype ina 
parent object. The child shares (inherits) 
all functions and properties of the parent, 
but can override them. For example, 

the parent might define functions and 
properties for any book, and each child 
would define the author, title, publisher, 
and date for a specific book. 


class 

(1) A definition or description of a 
category, which usually includes data 
and functions, and is used to create 
(instantiate) objects in that category. For 
example, the class for employees might 
specify that every employee has a name, 


phone, and email address, and provide 
functions to set or display them. (2) In 
CSS, a style definition that can be added 
to any number of elements. 


cloud 

A set of Internet servers that 
can be used instead of a local 
computer. Cloud storage stores 
files and other data, and cloud 
computing does computation. 


compiler 

A program that analyses a computer 
program and converts (compiles) it 
into machine code so it runs faster. 
See also interpreter. 


composite data 

Data that is created by combining other 
simpler data. For example, a string of 
characters, an array of numbers, or an 
object. See also primitive data. 


concatenate 

To combine items, usually character 
strings, one after another. For example, 
concatenate “snow” and “ball” to 

get “snowball”. 


conditional statement 
See branching statement 


constructor 

A special function used to 
create new objects of a class. 
Typically, the constructor 
allocates memory, initializes 
variables, and does other setup. 


data 
Any information stored in 
or used by a computer. 


data binding 

Connecting (binding) the 

data values in two or more objects 

or systems so that changing one 

also changes the others. For example, 
binding a GUI element to a data object 
ensures that changes to the object 
appear in the GUI, and GUI changes 
also change the object. 


debug 

To remove bugs in a program. 

This might involve running the 
program with different inputs, adding 
statements to print or store values 


as the program runs, or watching 
memory values and how they change. 
See also bug. 


directory 

(1) Also called a folder; a structure to 
store files, and sub-directories with 
other files. (2) A list of resources and 
how to access them. 


ECMAScript 

The official definition for the scripting 
language used in browsers and servers, 
to provide a standard that could be used 
by JavaScript, JScript, ActionScript, and 
other Web languages. 


element 

(1) A single value in a larger set, such as 

an array. (2) In HTML, a part of a document, 
often with a start tag, content, and a stop 
tag. For example, “<em>DANGER</em>" 

is an element that shows “DANGER” as 
emphasized text. 


event 

A description of something that has 
happened, often used as a signal to 
trigger responses in a program. For 
example, a mouse-click event could 
submit a form or display a menu. 


execute 
Also called run; the command 
to start a program. 


file object 
An object that describes or gives access 
to a file stored in the system's memory. 


float 

A number with a decimal point in it. 

It allows a computer to store very large 
and very small numbers more efficiently. 
Also called a floating point number. 


flowchart 
A graphical way to show the steps, 
branches, and loops in an algorithm. 


framework 

A collection of software elements that 
can be combined and customized in 
various ways, usually to create user 
applications. For example, Angular, 
Django, Express, jQuery, React, and 
Ruby on Rails are all frameworks used 
for websites and web applications. 


function 

Code that carries out a specific task, 
working like a program within a program. 
Often, a function has a name, a set of input 
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parameters to give information to the 
function, and a result for the code that 
called the function. Also called procedures, 
subroutines, and methods (especially in 
object-oriented languages). 


git 

A popular version control system, used 
to track changes in a set of files, so that 
users can easily collaborate and access 
different versions of the same file. 

See also version control system. 


global variable 
A variable that can be used anywhere ina 
program. See also local variable, variable. 


GUI (Graphical User Interface) 
Often pronounced “gooey”, a user 
interface is the name for graphical 
elements, such as buttons, menus, 
text fields, and checkboxes that make 
up the part of the program that a user 
can see and interact with. It is different 
from a command line interface where 
everything is displayed as text. 


hardware 

The physical parts of a computer 

such as the processor, memory, network 
connectors, and display. See also software. 


hack 

(1) An ingenious change to code 
that makes it do something new or 
simplifies it. (2) To break into other 
computer systems. 


hosting 

Also called web hosting; providing 
server and Internet access to clients 
for their own websites. In dedicated 
hosting, each client gets their own 
server; in shared hosting, many clients 
share a single server. 


hover state 

The appearance of a GUI element 
when the cursor or pointer hovers 
above it. For example, a button or 
text field might have a different colour 
or border when the mouse hovers 
above it, to indicate that it is active or 
ready to use. Also called “mouseover” 
state. See also normal state. 


hyperlink 

A text or graphical element that 

can be clicked, tapped, or otherwise 
selected to access other information, 

often using a url. The other information can 
be in the same document, another 
document, or on another website. 


index number 

A number indicating the position (index) of 
an element in an array. Many programming 
languages use square brackets with arrays, 
so “myArr[3]” means the element in position 
“3” of array “myArr”. 


inline element 

An HTML element that does not break 
the flow of text or change the layout 
of the page. See also block element. 


input control 

A part of a user interface, such as 
a button, checkbox, or text field, 
that allows a user to provide input 
to a program. 


instantiate 
To create a new object, usually 
using its class definition. 


integer 

A number without a fractional part, 
also called a whole number. Usually, 
a computer can represent a large, but 
not infinite, set of integer values. 


interface 

A boundary between two parts of 

a system. Thus, a user interface (Ul) is 
how a user interacts with the system, 
and an API (Application Programming 
Interface) is a set of definitions to help 
programmers develop applications 
using an underlying system. 


Internet 

The global computer network, 
which is actually a network of 
networks. Shortened from 
“interconnected network”. 


interpreter 

A program that executes computer 
programs one statement at a time, 
without first converting (or compiling) 
the program to machine code. 


iterate 

To execute a task or set of statements 
repeatedly. Most programming languages 
have special syntax to make it easier for 
programs to iterate, either a set number 
of times, or until some condition is met. 
For example, a program might iterate 
through an array to perform the same 
actions on each element. 


iteration 

The general process of iterating, or the 
process of repeatedly going through 

a set of statements in the code. 





library 

A set of resources that can be reused in 
other projects. These resources might 
include functions, classes, data structures, 
and data values. A library is similar to an 
API. For example, a math library might 
have a constant value for pi and functions 
to compute the sin, cosine, and tangent 
of an angle. See also API. 


literal 

A fixed value written in source code. 
In most programming languages, 
integer and real number literals are 
written normally, and strings of 
characters are written between 
quotation marks. 


list 

A set of data values, where each 
value has a specific position in the 
list. One way to store a list is as an 
array. See also array. 


local variable 

A variable that can only be used with 
a particular function or other limited 
part of a program. See also global 
variable, variable. 


loop counter 
A variable that counts (tracks) the number 
of times a loop has been repeated. 


machine code 

The set of instructions that is 
used by a computer processor. 

It is difficult for users to read 

or write machine code, so other 
programming languages are used 
with a compiler or interpreter to 
convert them to machine code. 


malware 

Short for “malicious software’, 

any software designed to gain 
illegal access to a computer or 
system. Malware includes viruses, 
worms, spyware, and ransomware. 


memory 

Storage used by a computer, 

using a wide range of technologies, 
including ROM (read-only memory), 
RAM (random access memory), 
solid states drives (SSDs), hard disk 
drives, and optical drives (e.g., CDs 
or DVDs). In general, faster technologies 
are much more expensive, so most 
computers use smaller amounts 

of expensive memory (RAM) and 
larger amounts of cheaper memory 
(hard disk drives). 


metadata 

Data that describes other bits of data. 
For example, web pages use metadata 
to specify the page title, language, and 
HTML version, while music files use 
metadata to specify the composer, 
performer, title, date recorded, style 
of music, copyright status, and other 
information. 


module 

A package of ready-made code that can 
be imported into a program, making lots 
of useful functions available. 


network 
A set of computers connected together to 
allow the sharing of data and resources. 


normal state 

The way a GUI element (for example, 
a button) appears normally. See also 
hover state. 


object 

In object-oriented programming, an 
object is a component that consists of 
data and code to manipulate the data. 


object-oriented 

An approach to coding where 
programs are organized into classes 
and objects, which typically contain 
data values and functions that use or 
change those values. 


opcode 

Part of a machine code instruction that 
specifies the operation rather than other 
information (such as the memory locations) 
to use. Shortened from “operation code”. 
See also operand. 


operand 

Parts of a machine code instruction that 
do not specify the operation, but other 
information such as the memory locations 
to use. More generally, a parameter passed 
to a function. See also opcode. 


OS (operating system) 

The underlying software system that 
manages resources (both hardware 
and software) and provides services 
used by other software. For example, 
Microsoft Windows, Apple’s macOS, 
and Linux. 


output 

The result of a program, which might 
be displayed on a screen, stored in 

a file, or sent to another program 

or computer. 


parameter 

An input for a function. In most 
languages, a function definition 
includes a name for each input. 

For example, the function “sum(x,y)” 


“i 


has two formal parameters “x” and “y”. 


parent object 

An object used to create child 
objects. The parent has a prototype 
with functions and properties that 
can be used by each child. See also 
child object. 


parse 

To take text or other input data and 
create a more useful structure out 

of it. For example, a browser parses 

a file of characters and creates a data 
structure (called the Document Object 
Model, or DOM) that shows which 
elements contain which other elements. 


payload 

The actual message within a larger 
communication. For example, 
when a browser loads a web page, 
the payload is the actual HTML that 
will be displayed. 


port 

(1) A virtual connection point 

used to contact a specific service 
or process. (2) To adapt software 

to run on another operating system 
or on other hardware. 


primitive data 

The basic data type that is used to build 
more complex data types. For example, 
characters, integers, and real numbers. 
See also composite data. 


primitive variable 
A variable that contains primitive 
data. See also reference variable. 


processor 

The hardware that actually executes 
a program. Also called the central 
processing unit or CPU. 


protocol 

A set of rules that define how something 
works. For example, HTTP is a high level 
protocol that describes how a browser and 
a web server communicate using lower 
level protocols that handle other details. 


prototype 

In JavaScript, a built-in variable with 
functions and properties that can be 
used by each child object. 


pseudo-class 

In CSS, a way to define a special 
state of an element. For example, 
the pseudo-class “:hover” defines 
an element's hover state. 


reference variable 

A variable that does not contain primitive 
data, but refers to a location in the system's 
memory where the data is stored. Typically 
used for arrays, strings, and other composite 
data. See also primitive variable. 


run 
See execute 


run time 

(1) The period of time during which a 
program runs. (2) Software that is used 
to help programs run. 


SASS variable 

A variable defined using SASS 
(Syntactically Awesome Style Sheet). 
SASS is an extension to CSS and adds 
features, including variables, that 
make it easier to develop style sheets. 


scope 

The parts of a program in which the specific 
name of a variable, function, or class has 
meaning. For example, a global variable’s 
scope is the entire program, while a local 
variable’s scope is a single function. 


screen reader 

A program that finds text on the 
screen and reads it aloud, to assist 
users with limited vision. 


script 

A program written in a scripting 
language, usually intended for an 
interpreter rather than a compiler. 
Originally, scripts were short programs 
that performed very specific tasks, 

but over time scripting languages have 
been used for many other purposes. 


semantic 

The part of code that is focused on the 
underlying meaning of text, rather than 

the rules it follows (the syntax). Most HTML 
tags focus on the meaning and role of the 
data, not the appearance. For example, 
<hl> marks a heading and <em> marks 
emphasized text, but neither describes 
how the text should be displayed. 


server 
A hardware or software system that provides 
services to other systems or clients. Software 
servers include database servers, mail 
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servers, and web servers. A hardware server 
can run more than one software server. 


software 

A set of instructions or data that tells 

a computer what to do, including the 
operating system, libraries, server software, 
and user applications. See also hardware. 


source code 

The set of instructions that is read and 
written by users. Source code can also be 
intended for an interpreter or a compiler. 


state 

The way a GUI element (a button ora 

text field) looks, which may change over 
time. For example, a button might be in 
its normal state most of the time, but may 
switch to its hover state when a cursor 

Or pointer moves over it. 


string 

A sequence of characters that are stored 
together. This includes letters, numbers, 
and punctuation. In most languages, literal 
strings are written within quotation marks. 


style definition 

In CSS, the definition of a specific style fora 
category of text. For example, the style 
definition for a list might include what type 
of bullets to use and how much to indent. 


subset 
A group of items taken from another set. 


syntax 

The part of code that is focused on the rules 
followed by text rather than its underlying 
meaning (the semantics). For example, the 
syntax for emphasized text requires an 
<em> tag, the text, and an </em>. 


tag 

In HTML, the text marking the start and end 
of an element, usually using angle brackets. 
For example, <em> and </em> are tags 
used for emphasizing a piece of text. 


template literal 

A way to write a string that can 
span multiple lines and insert the 
values of other variables. 


tuple 
A short list of items or values; a 2-tuple has 
two items, and an n-tuple has n items. 


URL (Uniform Resource Locator) 

A consistent way to refer to the location 
of some resource and how to access it 
via the Internet. 


variable 

The name associated with a value 
stored in the system's memory. In 
computing, a variable can have 
different values at different times. 


version control system 

A system that keeps track of files, so 
that users can easily collaborate and 
access different versions of the same 
file. Often, but not necessarily, used 
in software development. 


view 

In the Angular framework, a set 
of screen elements that control 
what the users can see. 


virus 

A type of malware that inserts 
its code into other programs, 

creating more copies of itself. 


web page 

A document that can be accessed 
over the Internet. It is displayed in 
a web browser. 


website 

A set of related resources, such as 

web pages, images, sounds, and videos 
that are stored and accessed together 
over the Internet using a web browser. 


Index 


Page numbers in bold refer 
to main entries. 
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265 
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292-95 
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~ animation (CSS) 239 
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APL 345 

| append() (Python) 113 
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applications software 17 
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hacks and tweaks 90-91 
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Backdrop Library (Scratch) 78 
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CSS styling 235, 238, 241, 247, 
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Events section 40 

Looks section 38 
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colour-coded 34-35 
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body, styling 307 

body tag 247, 310 
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using 45 


| Boolean operators 104, 270-71 
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Boyce, Raymond 347 
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Python 105, 119 


break command (Python) 110 
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browsers 217 
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Developer Tools 281, 305 
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169-72 
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tracking multiple budgets 172-73 
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20 


build a web page 216-33 
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how it works 216 
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hamburger menu 310, 311 
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radio 212 
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scroll to top 257, 292-95 

Shop Now 253, 254 
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C94, 344, 347 

C# 303, 344 

C# MVC 303, 343 

C++ 344, 347 

calculations 43, 102 

calling (functions) 112, 113, 310 
scheduling 194 


call-to-action button 220, 224, 258, 
code editors 208-9, 265 
CodePen 209 

coders 


329,330 
cameras 17 
canvas widget, Tk 147, 150 
carousels 327-31 
cars 16 
Cascading Style Sheets see CSS 
case sensitivity 99 
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CDN (content delivery network) 
290 
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344 
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Chamberlain, Donald 347 
characters 103 
disallowed see entities 
Chart.js 287 
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area 287 
doughnut 287 
flowcharts 53, 144 
Gantt charts 134, 135, 149, 151, 
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line 287 
Python 146-51 
cheat codes 90 
checkboxes 212 
Check Module (IDLE) 131 
child elements 237, 238 
child objects 282, 283 
child selector 237 
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choice() function (Python) 122 
Chrome see Google Chrome 
class attribute 225 
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_ Clean up Blocks (Scratch) 76 
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click() function (JQuery) 294 
client/server model 206, 207 
client-side scripting 209, 264, 289 
_ clock events 179 
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~ COBOL 346, 347 


Code Area (Scratch) 30, 35 


becoming a coder 16 
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Codeshare 265 

code sharing websites 265 
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background 235, 238, 241, 247, 
307, 312 

font 235, 247 
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rows 339 

styling 238 

text 262 

website style sheet 244 


colour-matching games 179 
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adding responsiveness 339-40 
Bootstrap 305, 335, 336 
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column numbers 182 

column values 137, 138, 160 
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| comma-separated values see CSV 
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community sharing 265 
| company logo 220, 223, 224, 286, 
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compilers 23 
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complex logic 64 

concatenation 103, 130 

config method 154 

confirmation box 273 

console log 273, 281 

: constructor method 282, 283 
Contact Us 220, 230-31, 256, 300, 


303,312 
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: content attribute 240 

Content Delivery Network seeCDN | 
: content organization (websites) 214 : 
| continue command (Python) 110, 


111 


Control blocks (Scratch) 40 
coordinates 36, 69, 70, 72 


canvas widgets 150 
grid and screen 182 


copyright 220, 233, 305, 331-32, 


334 
styling 263 


corners, styling 308 
costumes (sprites) 30-31, 33, 38, 57, 


Gl, 78,85; 71 


cross-platform run time engines 


289 


CSS 23, 234-39 


animating the web page 288, 289, 
301, 303 

building a web page 216, 218, 
222, 233 

debugging 281 

and graphics design 286, 287 

meta links 303 

new features on browsers 255 
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306-8, 312-16, 318-21, 325-26, 
330, 332, 337-40, 341 

selectors 236-37 

styling 238-39 

styling the web page 242-46, 250 


CSV files 135 


creating and reading 136-43 
Python library 136, 138, 139 


: csv.reader object 138, 139 
current year Sensing block (Scratch) 


45 
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| D3.js (Data-Driven Documents) 


287 


_ Dabblet 265 
data 


adding to web page 221 

programming languages for 345, 
347 

reading from files 135, 138 


databases, programming languages | 


344,345 


| data centers 16 


_ Data-Driven Documents see D3.js 
_ data types 


converting 139 
non-primitive 268 
primitive 266-67 


| datetime module (Python) 116 
deaf people 214 

Deals hyperlink 312 

| debugging 


checklist 133 

code editors 208-9 
debuggers 22, 106, 133, 281 
JavaScript 273, 280-81 
Python 94, 106, 130-33 


: decisions (Scratch) 44-45 
declarative programming 24 

) default code block 271 

| delay, introducing 41 
Department of Defense (US) 346, 


347 


descendant selector 237 
_ design 


program 53 
software development 20 


| desktop computers 16, 215, 240, 


241,305 


_ Developer tools 222, 280, 281, 


305,313 


: development environment 217, 305 
_ dictionaries, Python 138, 145, 158, 
159, 160, 174 

| DNS (Domain Name Systems) 


protocol 207 


Document Object Model (DOM) 
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: DOM see Document Object Model 
Domain Name Systems see DNS 
doughnut charts 287 

: do while loops (JavaScript) 275 

: drag and drop interfaces 25 


Scratch 28, 30, 35, 74, 76, 84 


draw_actors() function 
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draw_background() function 
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draw_chart function (Python) 


149, 151 


| draw() function (Pygame Zero) 
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: draw_game_over() function 


(Pygame Zero) 196, 197 


draw_handler function 
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drawing (Scratch) 67 
draw interface 179 
draw_scenery() function 
(Pygame Zero) 183, 202 

drop-down lists 212 

vertical 311 
dungeon crawl games 178, 179 
duplication 

code 62 

sprites 60 


E 


ECMA Script 264 

Edge 222 

editing, code 208-9 

editor window (IDLE) 98, 99 


education, programming languages | 
_ feature boxes 220, 224-29 


346 
Eich, Brenden 347 
elastic cloud computing 215 
element selector (CSS) 236 
elements (HTML tags) 210, 211, 
234, 235 
elif see else-if 
else branch (Python) 105 
else-if branch 
JavaScript 271 
Python 105 
email 
hyperlink 256 
id 259 
embeddable scripts 95 
engineering, programming 
languages 346 
entities 233 
equality 104 
equals signs (Python) 104 
error messages 
code editors 209 
Python 99, 132-33, 162, 163-64 
errors 
in JavaScript 280 
in Python 130-31, 162, 163-64 
see also debugging 
escaping loops (Python) 109, 
110-11 
EvalError (JavaScript) 280 
event-driven programming 24, 40 
event-handler function (Python) 
185, 186 
event handlers (JavaScript) 294 
event loop programs 178, 179 


_ Events blocks (Scratch) 40, 46 
exceptions (Python) 162 
expenditure, tracking 159-75 
explosions, painting 88 
Extension blocks (Scratch) 35, 37, 
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external files 264 


CSS 234 


: external hyperlinks 213 
external information 46 
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false value 270-71 
favicon 221 


definition 221, 309 
images 300 
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banner 314 


: fields (objects) 156, 157 
File Explorer 243 
filename labels 154 
file objects 107 

files 


input from 107 
output to 107 


File Transfer Protocol see FTP 

- Fill tool (Scratch) 57, 68, 82, 88 
financial planning 158-75 
Fintech (financial technology) 


a5, 


firmware 17 
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102, 139, 266 


FLOSS (free/libre and open 


source software) 94 
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_ folders 


creating 160, 180, 218, 243, 289, 
306, 308 
locating 243 


fonts 


canvas widget 150 
changing 57, 300, 301 
colour 247, 307 

company logo 313 

default 307 

Google Fonts 244, 300, 341 
list of website 244 
prominent 316 


_ fonts continued 


setting/defining 235, 244, 259, 
319,325 
size 190, 238, 315 


- footer section 220, 232, 247, 249, 


331, 333 
styling 261-62 


2 footers, table 167-68 

forever blocks (Scratch) 41, 84, 86 
forever loops 79, 86 

for loops 


JavaScript 268, 274 
Python 108, 110, 122, 145 


for in loops (JavaScript) 275 

| Format menu (Python) 169 
format strings (Python) 159, 166 
_ forms, HTML 212-13 

_ Fortran 346, 347 

frame container widget 147 

i frameworks (JavaScript) 284-85, 


286, 289 


FTP (File Transfer Protocol) 207 
_ functions 51 
_ functions (JavaScript) 269, 278-79, 


282, 283, 291 

creating 296, 308 

declaring 278 

function statement vs function 
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nested 279 
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- functions (Python) 112-15, 161, 


164-65 
built-in 113 
calling 112, 113, 117, 159 
creating 114-15 
defining 112, 114-15 
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methods 169, 170 
methods for scheduling calls 194 
naming 114, 117 
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_ Game Over message 89, 190, 195, 196 
_ Game_over variable 189 : 
games 23 


Asteroid dodge (Scratch) 80-91 
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gaming apps 134, 137 
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_ Gantt charts 134, 135, 149, 151, 152 
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_ Gimp 286 
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Go 344 
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_ Google Chrome 217, 222, 281, 
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i Google Fonts 244, 300, 341 
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Google Material Icons 341 
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graphical modules (Python) 134, 
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147, 286-87 
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HTML Canvas 287 
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website 215 


H 


_ hamburger menu button 310, 311 
hard-coding 100 
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| hex code 150 
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Homeindex() function (home js) 
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navigation bar 309-13 
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| JSFiddle 265 
_ Json data format 269 
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_ Kemeny, John 347 
_ keyboard control 46, 186, 214 
_ keys 187, 188 


dictionary 138, 140, 160 


_ keywords 210 


class 156, 283 
Pygame Zero keyword arguments 
198 


_ Knight's quest 178-203 


adding the keys 187-88 
adding messages 196-97 
animating the actors 197-98 
creating the guard actors 191 
creating the player 184 
hacks and tweaks 202-3 
how to play 178-79 

moving the guards 192-94 
moving the player 185-87 





Knight's quest continued 
setting up 180-84 
tracking the result 194-97 

Kurtz, Thomas 347 

Kyma 346 


L 


labels 212 
label widget 154 
labyrinthine environments 178 
languages 
foreign 52-63 
programming see programming 
languages 
laptops 240 
layers, horizontal 247, 305 
layout styles, different 241 
left column elements 225 
LEGO BOOST 59 
LEGO Education WeDo 2.0 59 
LEGO Mindstorms EV3 59 
len() function (Python) 103, 113 
Lerdorf, Rasmus 347 
less than 104 
libraries 
Google fonts and icons 341 
graphics 287 
JavaScript 265, 284-85, 286, 287 
Python 94, 95, 114, 116-17, 
136, 138, 139, 146, 159, 173 
Scratch 39, 54 
Lifelong Kindergarten group (MIT) 
29 
lightweight editors 208 
line charts 287 
link layer protocol 207 
Linux 29 
LISP 345 
lists 
of lists 111 
loops with 108 
Python 103, 111, 113, 118, 119, 
121, 122, 129 
Scratch 43 
sets compared with 140 
shuffling 121 
splitting 122 
tuples compared with 137 
within lists 111 
list widget 147 
local variables 115, 269 
location (Contact Us section) 258 


| logo 


_ logic 


errors 131 

JavaScript 270 
Python 104-5, 140 
Scratch 44-45 

task ordering 144-45 


logical operators 104, 270-71 
logic programming 345 
logic puzzle (Scratch) 64-79 


adding more sprites 74-77 
adding a new sprite 71-73 
adding the rules 78-79 
getting started 66-70 
hacks and tweaks 78-79 
program design 65 

the puzzle 64 


company 220, 223, 224, 286, 
305, 311,313 

styling banner 251 

styling Top Menu 250, 313 


_ loops 


continuous 135, 144, 145 

do while loops 275 

escaping 109, 110-11, 277 

infinite 109 

JavaScript 274-77 

with a list 108 

loop conditions 108 

for loops 108, 110, 122, 145, 268, 
274 

loop variables 108, 111 

nested 110-11, 179, 276 

Pygame Zero game loop 179 

Python 108-11, 118, 119, 122, 125 

Scratch 41, 45, 65, 73, 75, 79, 81 
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_ Mac computers 


locating folders 243 
Pygame Zero 1/6-/7 
Python on 97 
Scratch on 29 


: machine code 23, 264, 347 
machine languages 344 

main loop function 147 

Makey Makey blocks (Scratch) 59 
managers 18 


_ map() function (Python) 140 
Maple 345 
_ maps 


Contact Us section 258 
virtual worlds 287 


margins 245 


setting 247, 307, 311, 319 


Mathematica 345 
mathematics, symbolic 345 
_ Math)S 285 

MATLAB 345 

Max 346 

media queries 241 
messages 


displaying (Scratch) 38 

naming 49 

primary (websites) 309, 316-17 
sending (Scratch) 48-49 


metadata 221, 240 
meta links 303 
: methods 


calling (Python) 113 
JavaScript 282, 293, 297, 298 
Python 113, 157, 169, 170, 174 


| micro:bit 59 
microprocessors 23 
Microsoft Basic 347 
Microsoft Visual Studio 


Community 2019 see Visual 
Studio Community 2019 


Microsoft Windows 17 


locating folders 243 
Pygame Zero 1/6-/7 
Python on 96 
Scratch on 29 


military, programming languages 
_ while loops 108, 109, 110, 125, 274 
Lovelace, Ada 347 

| low-level programming languages 


for 346 


| modal windows 272, 273 
: modules 


adding 309-10 

built-in 116 

importing and using 117 
Python 116-17 


modulo (remainder) operator 


(Python) 199 


Moment.js 285 
: money, Budget manager project 


158-75 


| Monty Python's Flying Circus 96 
Motion blocks (Scratch) 36-37 
mouse 214 


mouse-over state 230, 249, 252, 
254, 258, 260, 262 


2 move_guard() function 


(Pygame Zero) 193, 194, 197 


- movement 


illusion of 81, 87 
logic 185 


| move_player() function 


(Pygame Zero) 186, 188, 189, 
193, 195, 198, 202 


_ multimedia 206 

| multiple classes selector 237 

_ multiview function 208 

| Music blocks (Scratch) 39, 59 

: music, programming languages 


346 


‘N 


_ named tuples (Python) 135, 


142-43 


: name errors 131 
_ NASA, Mission Control Centre 


95 


| navigation bar 305 


creating 309-13 
templates 333 


nested functions (JavaScript) 


279 


: nested loops 


JavaScript 276 
Python 110-11, 179 


| NetBeans 209 

network protocols 207 

new projects (Scratch) 54, 66 
next sibling selector 237 

- Nodejs 264, 284, 285, 289 
Node Package Manager 


see NPM 


noise reduction 345 
_ non-primitive data types 


268 


normal state 254 

not (logical operator) 271 
: not block (Scratch) 45 
not equal 104 

_ Notepad 208, 218 
NPM 284 

| numbers 


computation 345 

in JavaScript 266 

list of 129 

in Python 102, 129, 139 
random 43, 121, 201 

in Scratch 43 


O 


Objective-C 344 
object-oriented programming 
25, 156-57, 264, 347 
JavaScript 282-83 
objects 
JavaScript 269, 282-83, 297 
Python 156-57, 188 
office applications, programming 
languages 344 
office workers 18 
on document ready() function 
(home,js) 292, 321, 323 
on_key_down() function (Python) 
186 
opcode 23 
Opera 222 
operands 23 
operating systems 17 
installing Python 96-97 
programming languages 344 
updates 177 
Operator blocks (Scratch) 42-43, 
44, 64 
or (logical operator) 270 
or block (Scratch) 45 
outline colour (Pygame Zero) 190 
output 
JavaScript 272-73 
Python 106-7 
Scratch 35 
output blocks (Scratch) 35 


P 


package managers 176-77 

packets 206-7 

packet sequence 207 

packet switched networks 206 

padding 235, 245, 245, 247, 248, 
249, 252, 307, 311 

page elements, styling 244-53 

Paint Editor (Scratch) 33, 57, 61, 64, 
66-68, 78, 88 

pandas 95 

parent elements 237, 238 

parent function 279 

parent objects 282 

parent tags 210, 211, 239 

parent widgets 147 

Pascal 346 

PayPal 342 

pen blocks (Scratch) 37, 59 
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| Perl 344 
pet shop website project : 
animating the web page 288-303 | 


Build a web page 216-33 
styling the web page 242-63 


_ PHP 209, 344, 347 

pip package managers 176-77 

_ pixels 150, 182, 215, 238 
placeholder text 261 

place markers 327 

| planning (software development) 


20 


_ plugins 209 

pos property (Python) 193 
PostScript 345 
prerequisites 


as sets of numbers 140 
tasks 134, 141, 144, 145 


preview windows 208 
_ primary messages 305, 316-17 
_ primitive data types 266-67, 268, 


269 


print() function (Python) 106, 113 
printing (code editing) 208 
probability 201 

| problem-solving 65 

procedural programming 25 
processing blocks (Scratch) 34-35 
program flow 34-35, 50 


managing 40-41 


programming 16-17 
_ programming languages 16, 22-25, 


344-47 
choosing 25 
for data 345 
early 346 
families of 344 
popular 347 
for specific purposes 345 
types of 24-25 
visual 346 
website construction 216 
see also JavaScript; Python; 


Scratch 
programs 17 
Project planner 134-55 


creating and reading the CSV file 
136-43 

drawing the chart 146-51 

hacks and tweaks 152-55 

how it works 134 

ordering the tasks 144-46 

program design 135 


_ Prolog 345 
_ promo bar 247-48, 287, 288, 296, 


299 


promotional messages 220, 221, 


296-99 
cycling through 298-99 
initializing 297-98 
styling 247-48 


prompts 272 

| protocols 207 

i prototype-based languages 283 
prototypes (JavaScript) 282, 283 
: push() method (JavaScript) 268 
_ puzzles 64-79 

: PyBrain 95 

: Pygame 117 

_ Pygame Zero 95, 117, 176-77 


Actor class 178, 183 
animations 198 
drawing text with 190 
game loop 179 
initializing 180 

library 117 

updates 177 


: PySoy 95 
i Python 22, 24, 25, 92-203, 347 


applications 95 

Budget manager project 158-75 

common errors 99 

data in 102-3 

debugging 130-33 

dictionaries 160, 174 

exceptions 162 

features 94-95 

format strings 166 

functions 112-15, 159, 161, 
164-65 

how it works 95 

input and output 106-7 

installing 96-97 

Knight's quest project 178-203 

libraries 94, 95, 114, 116-17, 136, 
138, 139, 146, 159, 173 

logical operators and branching 
104-5 

loops in 108-9 

ona Mac 97 

objects and classes 156-57 

Project planner project 134-55 

Pygame Zero 176-77 

sets 140 

Team allocator project 118-29 

tuples 137 


_ Python continued 


using IDLE 98-99 

variables 100-101, 115, 121, 125, 
160, 163, 169, 170, 189, 195 

versions 96 

on Windows 96 


_ Python Django 303, 343 
_ Python Standard Library 116 


fe 


| quotation marks 103, 320-21 
quotes 305, 317-23 


animating 322-23 
applying properties to 321 
initializing 322 


R 


R345 

: radio buttons 212 

2 randint() function (Python) 201 
random allocation 118, 119 
random blocks (Scratch) 87 

: random module (Python) 116, 118, 


119, 120, 121, 200 


_ random numbers 43, 121, 201 

: RangeError (JavaScript) 280 

| range function (Python) 108 

_ Raspberry Pi 23 

| ReactJS 284 

readability, code 94 

readable content (websites) 214 
read_tasks() function (Python) 


141, 143 


: ReferenceError (JavaScript) 280 
reference variables 268 

repeat blocks (Scratch) 41, 45, 75 

: repeat until blocks (Scratch) 45 

_ RequireJS 285 

researchers 19 

: response variable 125 
responsive layouts (websites) 215, 


240-41, 304 


responsive website 304-43 


adding the copyright 331-32 

adding a feature image 313-15 

adding last minute details 327-31 

adding a message 316-17 

adding the modules 309-10 

adding popular destinations 
324-25 

adding a quote 317-23 


responsive website continued 
adding the title and favicon 309 
creating the navigation bar 
309-13 
creating a new page 335-40 
creating a template 332-33 
getting started 305-8 
hacks and tweaks 341-43 
how it works 304 
program design 304 
project requirements 305 
result, tracking 195 
right column elements 226 
Ritchie, Dennis 347 
robotics 23, 179 
rollover effect 253 
root folder 218, 219 
root window widget 147 
rounded corners 308 
round() function (Python) 113, 186 
routers 206-7 
rows 
adding responsiveness 338 
changing colours 339 
row numbers 182 
styling 338 
Ruby 344 
run time environment 284 
runtime errors 130 


S 


Safari 217, 222 
SASS variables 341 
Scalable Vector Graphics see SVG 
scenery (Python) 182-83 
Scheme 345 
science, programming languages 
for 346 
scientific computing 95 
scientists 19 
scope, variables 269 
Scratch 25, 26-91, 346 
Asteroid dodge project 80-91 
backdrops 55 
coloured blocks and scripts 34-35 
features 28-29 
getting Scratch 29 
hardware support 29 
input 46-47 
interface 30-31 
logic and decisions 44-45 
logic puzzle project 64-79 


_ Scratch continued 


loops 41, 45, 65, 73, 75 

managing program flow 40-41 

manipulating data 42-43 

output using looks and sounds 
38-39 

output using movement 36-37 

sending messages 48-49 

sprites 32-33 

travel translator project 52-63 

using functions 50-51 

variables 42, 44,58 69, 70, 72, 
74-77, 79, 83 

versions of 30 


screen coordinates 182, 183 
screen_coords() function (Python) 


186 


i screen.draw.text() function 


(Python) 190 


screen size 215, 240-41, 304, 305, 


309, 315,316,319, 525, 326, 
330,959 
adding responsiveness 315, 316, 
319, 325, 330, 338, 339-40 
centring contents 313, 314 


_ scripting, client- and server-side 


209 


: scripting languages 344 
Scripts 


creating 35, 344 
JavaScript 264, 265 
Python 95 

Scratch 34, 35 


- scripts file 308 

scroll button, styling 257-58 
scrolling 214 

scroll to top 230, 257, 288, 292-95 
search engines 214 

selectors, CSS 235, 236-37 


complex 237 
grouping 237 


self-executing functions 


(JavaScript) 279 


semantics 215 
sensor input 46 
: servers 206-7 


dedicated 215 


server-side scripting 209, 264, 289 


template options 303, 343 


| set() constructor function (Python) 


140 


_ sets (Python) 134, 140 


issubset set method 145 


_ setters 283 
setup_game() function (Python) 


187, 189, 191, 195, 196 


shape-matching games 179 
_ shared hosting 215 
_ shell window (IDLE) 98, 99, 120, 


161, 163 


Shop Menu 303 

_ Shop Now link 253, 254 

Shopping Cart 300 

: shuffle() function (Python) 121 
shuffling 118, 119, 121 
side-scrolling games 80, 81 
simulations 65 

slideshows 327, 328, 331 

_ smartphones 179, 215, 240, 241, 305 
social media, adding to websites 


501-2 


socket module (Python) 116 
_ software 16, 18 


developers 20-21 
engineers 19 


software systems, programming 


languages 344 


"Solution Explorer 243, 289, 313, 


521,990 


- solution file 218, 219 

Solution Folder 243, 289 

sound, Scratch 39 

Space applications 95 

spacers 246, 307 

spaces, vertical 224, 246 

spacing settings 235, 245 

special effects (Scratch) 38 

_ specificity 239 

split method (Python) 140 

sport, team allocator project 118-29 
spreadsheet applications 135, 136 
spread syntax 268 

| Sprite Library (Scratch) 54, 68, 71, 


74, 76, 78, 82 


"Sprite List (Scratch) 30, 54, 83 
| sprites (Scratch) 32-33 


adding buttons 56, 60-61 
adding new 54, 71-77, 82 
broadcasts 48-49 

changing appearance 38 
collision detection 47 

costumes 32, 33, 57, 61, 78, 85, 91 
creating 32, 54, 68 

deleting the cat 54, 66 

drawing with pen blocks 37 
duplicating 60 


_ sprites continued 


moving using coordinates 36 
moving using directions 37 
naming/renaming 56, 68 
speech/thought bubbles 38 


SQL 345, 347 
_ Stage (Scratch) 30 


changing backdrop 55 
coordinates 36 
designing backdrop 66-68 


Stage Info (Scratch) 30 
Statistical computing 345 
| steering controls 84 

: strings 


combining 103 

concatenating 267 

format 166 

JavaScript 266, 267 

Python 100, 103, 138, 139, 140, 
141, 166, 190, 198 

Scratch 42 


Stroustrup, Bjarne 347 
style definitions, CSS 235, 238-39, 


250,252; 250; 319,325 


| styles folder 243 
_ style sheets 242, 243, 306 
_ styling 


body elements 307 
carousel 330 

Contact Us section 258 
copyright 263, 332 

corners 308 

CSS 238-39 

and ease of navigation 243 
email hyperlink 256 
encourages interaction 243 
feature box 253-57 

footer 261-62 

headers 307 

hyperlinks 252, 256, 262, 330, 339 
image and subheading 326 
image text 314 

input field 259 

logo 313 

margin and padding 245 
non-picture elements 254 
page elements 245-53 
primary message 316 
quotation marks 320-21 
quote 318 

rows 338 

scroll button 257-58 
standardization 244 


styling continued 
styling the webpage project 
242-63 
Subscribe section 259 
text 306-8, 314, 330 
Tk canvas widget 150 
styling the web page 242-63 
feature box styling 253-57 
program requirements 242 
setting up 243-44 
styling the page elements 245-53 
styling the remaining elements 
257-63 
what the program does 242 
sub-elements 210 
subheadings 325-26 
Sublime Text (code editor) 208 
subscribe button 260 
subscription link 220, 232, 247 
styling 259-60 
subsets 122, 145 
substrings 267 
SVG 286 
Swift 344 
switch statement 271 
symbolic mathematics 345 
synchronization 49 
syntax 94 
errors 130, 131, 132 
highlighting 208 
spread 268 
SyntaxError (JavaScript) 280 
SynthEdit 346 
system languages 344 


T 


tables 
footers 167 
headers 167 

tablets 215, 240, 305 

tabs 209 

tags, HTML 210-11, 234 
attributes 211 
container 333 
indenting 211 
order of 310 

TCP (Transmission Control 

Protocol) 207 

Team allocator 118-29 
create a team 120-21 
hacks and tweaks 127-29 
how it works 118 


TeX 345 
text 
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- Team allocator continued 


pick new teams 125-26 
pick teams 122-24 
program design 119 


templates 


creating new pages from 305, 
333-34, 335 

literals 267 

master page 303, 304 

renaming 335 

web page 343 


testing (software development) 


20 


adding to web page 221 
drawing with Pygame Zero 190 
feature images 314 
placeholder 261 

positioning 319 

quote 318 

styling 253-54, 306-8, 314, 330 


text alternatives (website) 214 
text area (web pages) 212, 213 
text-based languages 94 

_ TextEdit 218 

_ text editors 208, 305 


IDLE 95 


text fields (web pages) 212, 213 
text files 305 

text input, users 47 

| Text tool (Scratch) 57, 61, 88 
Text to Speech blocks (Scratch) 


Dg, 05 


| throw statement 281 

ticker tape 215 

tiles 179, 199, 200 

time management, Project planner 


134-55 


time module (Python) 116 

| TK Canvas widget 147, 150 

Tk Frame widget 153 

_ Tk GUI 147 

_ tkinter (Python) 116, 146, 148, 150 
TK module (Python) 146-51 

_ top-down 2D view 178 

: top-down coding 114 

top-level window widget 147 

_ Top Menu 220, 222, 223, 303, 


310, 311 
styling 249, 250-51 


touching mouse-pointer block 


(Scratch) 47 


- tournaments, sporting 128 
: traceback error messages (Python) 


130 


transitions 250 


transition instruction 249-50, 
252, 254 


Translate blocks (Scratch) 56, 59, 


60, 63 


translation apps, travel translator 
_ project 52-63 

i transport layer protocol 207 
travel translator (Scratch) 52-63 


adding a language 56-60 
adding more languages 60-62 
hacks and tweaks 63 

how the app works 52 
program design 53 

setting the scene 54-56 


travel website project 304-43 
| trend analysis 345 

true value 270-71 

try block 281 

_ tuples (Python) 134, 137, 138, 


142-43 
calling 143 


: turtle module (Python) 116 
tween keyword arguments 198 
Twitter 301-2 

: two-dimensional games 178, 179 
: TypeError (JavaScript) 280 

type errors 130 

_ TypeScript 285 


U 


UDP (User Datagram Protocol) 


207 


underscores 114 
: Uniform Resource Locator 


see URL 


Unix operating system 94 
: update game state (Pygame Zero) 


lz? 


update handler function 


(Pygame Zero) 179 


| updates, Pygame Zero 177 

: upper() method (Python) 113 
URIError (JavaScript) 280 

| URL (Uniform Resource Locator) 


206 
hyperlinks and 213 


User Datagram Protocol 


see UDP 


user input 


Java Script 265, 272, 284 
Python 106 
Scratch 40 


user interactions 46 


V 


: value 


Boolean 270 

comparing 270 

functions producing 115 

sets 140 

of variables 100, 101, 109, 268, 
269 


van Rossum, Guido 94, 96, 347 
_ variables 


arrays 268 

and Boolean operators 104, 266 

class assigned to 283 

declaring 101, 267, 269 

global 115, 160, 163, 189, 195, 269 

initializing 267 

instance 170 

JavaScript 266-69, 278, 279, 
298, 308 

local 115, 269 

naming 101, 188 

non-primitive data types 268 

primitive data types 266-67 

Python 100-101, 115, 121, 125, 
160, 163, 169, 170, 189, 195 

SASS 341 

scope of 269 

Scratch 42, 44, 58, 69, 70, 72, 
74-77, 79, 83 

and sets 140 

using 101 

values 100, 101, 109, 268, 269 


_ VBA 344 

vector images 286 

vector mode 33, 57, 61 

vertical alignment 321 

: vertical borders 239 

vertical lists 311, 312, 326 

| vertical spaces 224, 225, 230, 231, 


246, 307, 319, 329, 333 


i video sensing blocks (Scratch) 59 
i viewport 240 

: viewport meta definition 309 
Virtual Private Server see VPS 
virtual worlds, mapping 287 

_ Visual Basic 347 





visual programming languages 
25, 348 

Visual Studio Code 208 

Visual Studio Community 2019 
209, 217-20, 242, 243, 289, 
305, 306, 333 

voice, choice of (Scratch) 63 

VPS (Virtual Private Server) hosting 
215 


W 


wait blocks (Scratch) 41, 45 

wait until blocks (Scratch) 45 

warp speed slider 80, 89 

washing machines 16 

waterfall model 21 

web apps 23 

webbrowser module (Python) 116 

web browsers 206, 207, 208, 209, 
214, 234, 250, 255, 265 

Web Content Accessibility 
Guidelines 215 

web development 19, 95 


_ web hosting 215 
7 web pages 215 


animating the web page project 
288-303 

building 216-33 

creating new 335-40 

hyperlinks and forms 212-13 

responsive 240, 241 

styling the web page project 
242-63 

templates 303, 333-34, 335, 343 


web protocol 207 
web server 206, 207, 208, 209 
websites 23 


accessibility 214-15 

animating 288-303 

basic HTML 210-11 

building better 214-15 

building a web page 216-33 

connecting to 206-7 

HTML forms and hyperlinks 
212-13 

icons 300 

interactive 288 
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_ websites continued 


payments on 342-43 

responsive website project 
304-43 

social media 301-2 

styling 242-63 


WebStorm 209 
_ welcome message 120 
_ when | receive block (Scratch) 48, 


J3, 75,7 7,80; 00 


while loops 


JavaScript 274 
Python 108, 109, 110, 125 


| widgets 


frame container 147 

label 154 

list 147 

parent 147 

root window 147 

Tk canvas widget 147, 150 
Tk Frame 153 

Tk GUI 147 

top-level window 147 
Twitter 301 


_ Windows see Microsoft Windows 
: windows, resizing 152 

Wolfram Language 24 

work schedules 134 

World Wide Web, working of 


206-7 


| wrap Class 248 


XYZ 


x coordinates 182 
XML 265 

: y coordinates 182 
: zoom function 209 
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